mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(root): stitches removed globally, react 18 implemented, pnpm setup changed
This commit is contained in:
Junior Garcia
parent
564337bac6
commit
c45109c8f4
4
.npmrc
4
.npmrc
@ -1,5 +1,3 @@
|
|||||||
strict-peer-dependencies=false
|
strict-peer-dependencies=false
|
||||||
enable-pre-post-scripts=true
|
enable-pre-post-scripts=true
|
||||||
public-hoist-pattern[]=*typescript*
|
public-hoist-pattern[]=*tailwind-variants*
|
||||||
public-hoist-pattern[]=*@stitches/react*
|
|
||||||
public-hoist-pattern[]=*@react-types/*
|
|
||||||
@ -16,7 +16,7 @@
|
|||||||
"@codesandbox/sandpack-react": "0.14.3",
|
"@codesandbox/sandpack-react": "0.14.3",
|
||||||
"@mapbox/rehype-prism": "^0.6.0",
|
"@mapbox/rehype-prism": "^0.6.0",
|
||||||
"@mdx-js/react": "^1.6.22",
|
"@mdx-js/react": "^1.6.22",
|
||||||
"@nextui-org/react": "1.0.0-beta.12",
|
"@nextui-org/react": "workspace:*",
|
||||||
"@types/lodash": "^4.14.170",
|
"@types/lodash": "^4.14.170",
|
||||||
"@vercel/analytics": "^0.1.6",
|
"@vercel/analytics": "^0.1.6",
|
||||||
"algoliasearch": "^4.10.3",
|
"algoliasearch": "^4.10.3",
|
||||||
@ -37,10 +37,10 @@
|
|||||||
"parse-numeric-range": "1.2.0",
|
"parse-numeric-range": "1.2.0",
|
||||||
"prism-react-renderer": "^1.2.1",
|
"prism-react-renderer": "^1.2.1",
|
||||||
"querystring": "^0.2.1",
|
"querystring": "^0.2.1",
|
||||||
"react": "^17.0.2",
|
"react": "^18.0.0",
|
||||||
"react-autosuggest": "^10.1.0",
|
"react-autosuggest": "^10.1.0",
|
||||||
"react-device-detect": "^1.17.0",
|
"react-device-detect": "^1.17.0",
|
||||||
"react-dom": "^17.0.2",
|
"react": "^18.0.0",
|
||||||
"react-iconly": "^2.2.2",
|
"react-iconly": "^2.2.2",
|
||||||
"react-instantsearch-dom": "^6.12.0",
|
"react-instantsearch-dom": "^6.12.0",
|
||||||
"react-intersection-observer": "8.32.2",
|
"react-intersection-observer": "8.32.2",
|
||||||
|
|||||||
24
apps/vite-example/.gitignore
vendored
24
apps/vite-example/.gitignore
vendored
@ -1,24 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite + React + TS</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@nextui-org/vite-example",
|
|
||||||
"private": true,
|
|
||||||
"version": "1.0.0-beta.12",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "tsc && vite build",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@nextui-org/link": "workspace:*",
|
|
||||||
"@nextui-org/theme": "workspace:*",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/react": "^18.0.26",
|
|
||||||
"@types/react-dom": "^18.0.9",
|
|
||||||
"@vitejs/plugin-react": "^3.0.0",
|
|
||||||
"autoprefixer": "^10.4.13",
|
|
||||||
"postcss": "^8.4.21",
|
|
||||||
"tailwindcss": "^3.2.4",
|
|
||||||
"typescript": "^4.9.3",
|
|
||||||
"vite": "^4.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,53 +0,0 @@
|
|||||||
import {cva, linkVariants, type ExtendVariantProps, type VariantProps} from "@nextui-org/theme";
|
|
||||||
import {Link, LinkProps} from "@nextui-org/link";
|
|
||||||
const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
|
|
||||||
|
|
||||||
const customLink = cva(null, {
|
|
||||||
variants: {
|
|
||||||
color: {
|
|
||||||
...linkVariants.color,
|
|
||||||
teal: "text-teal-600",
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
true: "before:content-['👉'] before:mr-1",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
type MyLinkProps = ExtendVariantProps<LinkProps, VariantProps<typeof customLink>>;
|
|
||||||
|
|
||||||
const MyLink = (props: MyLinkProps) => {
|
|
||||||
const {link, color, ...otherProps} = props;
|
|
||||||
|
|
||||||
return <Link {...otherProps} className={customLink({color, link})} isExternal={!!link} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col space-y-3">
|
|
||||||
<Link color="primary" href="#" size="xs">
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<Link color="secondary" href="#" size="sm">
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<Link color="success" href="#" size="md">
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<Link color="warning" href="#" size="xl">
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<Link className="text-2xl" color="error" href="#">
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<Link className="text-2xl text-pink-500" href="#">
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<MyLink link color="teal" href="#">
|
|
||||||
Visit out new Store
|
|
||||||
</MyLink>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
@ -1,3 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import ReactDOM from "react-dom/client";
|
|
||||||
|
|
||||||
import App from "./App";
|
|
||||||
import "./index.css";
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>,
|
|
||||||
);
|
|
||||||
1
apps/vite-example/src/vite-env.d.ts
vendored
1
apps/vite-example/src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: [
|
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
|
||||||
"node_modules/@nextui-org/link/**/*.{js,jsx,ts,tsx}",
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [require("@nextui-org/theme/plugin")],
|
|
||||||
};
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ESNext",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
|
||||||
"allowJs": false,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"esModuleInterop": false,
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"strict": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "Node",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx"
|
|
||||||
},
|
|
||||||
"include": ["src"],
|
|
||||||
"references": [{"path": "./tsconfig.node.json"}]
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"composite": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "Node",
|
|
||||||
"allowSyntheticDefaultImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import {defineConfig} from "vite";
|
|
||||||
import react from "@vitejs/plugin-react";
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
});
|
|
||||||
@ -7,8 +7,8 @@
|
|||||||
"@testing-library/jest-dom": "^5.11.4",
|
"@testing-library/jest-dom": "^5.11.4",
|
||||||
"@testing-library/react": "^11.1.0",
|
"@testing-library/react": "^11.1.0",
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
"react": "^17.0.2",
|
"react": "^18.0.0"
|
||||||
"react-dom": "^17.0.2",
|
"react": "^18.0.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"web-vitals": "^1.0.1"
|
"web-vitals": "^1.0.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -15,8 +15,8 @@
|
|||||||
"@remix-run/vercel": "^1.4.0",
|
"@remix-run/vercel": "^1.4.0",
|
||||||
"@vercel/node": "^1.14.0",
|
"@vercel/node": "^1.14.0",
|
||||||
"add": "^2.0.6",
|
"add": "^2.0.6",
|
||||||
"react": "^17.0.2",
|
"react": "^18.0.0"
|
||||||
"react-dom": "^17.0.2",
|
"react": "^18.0.0",
|
||||||
"use-dark-mode": "^2.3.1",
|
"use-dark-mode": "^2.3.1",
|
||||||
"yarn": "^1.22.18"
|
"yarn": "^1.22.18"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -9,8 +9,8 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/react": "2.0.0-beta.1",
|
"@nextui-org/react": "2.0.0-beta.1",
|
||||||
"react": "^17.0.2",
|
"react": "^18.0.0",
|
||||||
"react-dom": "^17.0.2"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^17.0.33",
|
"@types/react": "^17.0.33",
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
"@testing-library/react": "^13.1.1",
|
"@testing-library/react": "^13.1.1",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"react": "^18.0.0",
|
"react": "^18.0.0",
|
||||||
"react-dom": "^18.0.0",
|
"react-dom": "^17.0.2,
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
|||||||
24
package.json
24
package.json
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "nextui",
|
"name": "nextui",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"version": "2.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Junior Garcia",
|
"name": "Junior Garcia",
|
||||||
@ -29,9 +30,10 @@
|
|||||||
"lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/**/*.{ts,tsx}",
|
"lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/**/*.{ts,tsx}",
|
||||||
"turbo:clean": "turbo clean && rimraf ./node_modules/.cache/turbo",
|
"turbo:clean": "turbo clean && rimraf ./node_modules/.cache/turbo",
|
||||||
"turbo:graph": "pnpm build --graph=dependency-graph.png",
|
"turbo:graph": "pnpm build --graph=dependency-graph.png",
|
||||||
"clean": "pnpm turbo:clean && pnpm clean:node-modules && pnpm install",
|
"clean": "pnpm turbo:clean && pnpm clean:node-modules && pnpm clean:lock && pnpm install",
|
||||||
"clean:pn-types": "rimraf ./node_modules/.pnpm/csstype*",
|
"clean:pn-types": "rimraf ./node_modules/.pnpm/csstype*",
|
||||||
"clean:node-modules": "rimraf ./apps/**/node_modules && rimraf ./packages/**/**/node_modules && rm -rf ./node_modules",
|
"clean:node-modules": "rimraf ./apps/**/node_modules && rimraf ./packages/**/**/node_modules && rm -rf ./node_modules",
|
||||||
|
"clean:lock": "rm ./pnpm-lock.yaml",
|
||||||
"create:cmp": "plop component",
|
"create:cmp": "plop component",
|
||||||
"create:pkg": "plop package",
|
"create:pkg": "plop package",
|
||||||
"create:hook": "plop hook",
|
"create:hook": "plop hook",
|
||||||
@ -39,7 +41,7 @@
|
|||||||
"version:dev": "changeset version --snapshot dev",
|
"version:dev": "changeset version --snapshot dev",
|
||||||
"release": "changeset publish",
|
"release": "changeset publish",
|
||||||
"release:dev": "changeset publish --tag dev",
|
"release:dev": "changeset publish --tag dev",
|
||||||
"postinstall": "husky install && pnpm clean:pn-types && pnpm --filter @nextui-org/theme build"
|
"postinstall": "husky install && pnpm --filter @nextui-org/theme build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.14.5",
|
"@babel/cli": "^7.14.5",
|
||||||
@ -59,19 +61,19 @@
|
|||||||
"@react-bootstrap/babel-preset": "^2.1.0",
|
"@react-bootstrap/babel-preset": "^2.1.0",
|
||||||
"@react-types/link": "^3.3.3",
|
"@react-types/link": "^3.3.3",
|
||||||
"@react-types/shared": "^3.15.0",
|
"@react-types/shared": "^3.15.0",
|
||||||
"@storybook/react": "^6.5.12",
|
"@storybook/react": "^6.5.16",
|
||||||
"@swc-node/jest": "^1.5.2",
|
"@swc-node/jest": "^1.5.2",
|
||||||
"@swc/core": "^1.3.35",
|
"@swc/core": "^1.3.35",
|
||||||
"@swc/jest": "^0.2.24",
|
"@swc/jest": "^0.2.24",
|
||||||
"@testing-library/dom": "^8.1.0",
|
"@testing-library/dom": "^8.1.0",
|
||||||
"@testing-library/jest-dom": "^5.16.4",
|
"@testing-library/jest-dom": "^5.16.4",
|
||||||
"@testing-library/react": "^12.1.2",
|
"@testing-library/react": "^14.0.0",
|
||||||
"@testing-library/react-hooks": "^7.0.0",
|
"@testing-library/react-hooks": "^8.0.1",
|
||||||
"@testing-library/user-event": "^13.2.0",
|
"@testing-library/user-event": "^14.4.3",
|
||||||
"@types/jest": "^28.1.1",
|
"@types/jest": "^28.1.1",
|
||||||
"@types/node": "^15.12.4",
|
"@types/node": "^15.12.4",
|
||||||
"@types/react": "^18.0.28",
|
"@types/react": "^18.0.1",
|
||||||
"@types/react-dom": "^18.0.11",
|
"@types/react-dom": "^18.0.0",
|
||||||
"@types/shelljs": "^0.8.9",
|
"@types/shelljs": "^0.8.9",
|
||||||
"@types/styled-jsx": "^2.2.8",
|
"@types/styled-jsx": "^2.2.8",
|
||||||
"@types/testing-library__jest-dom": "5.14.5",
|
"@types/testing-library__jest-dom": "5.14.5",
|
||||||
@ -117,13 +119,13 @@
|
|||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
"prettier-eslint": "^12.0.0",
|
"prettier-eslint": "^12.0.0",
|
||||||
"prettier-eslint-cli": "^5.0.1",
|
"prettier-eslint-cli": "^5.0.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.0.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.0.0",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"shelljs": "^0.8.4",
|
"shelljs": "^0.8.4",
|
||||||
"tsup": "6.4.0",
|
"tsup": "6.4.0",
|
||||||
"turbo": "1.6.3",
|
"turbo": "1.6.3",
|
||||||
"typescript": "4.6.2",
|
"typescript": "^4.7.4",
|
||||||
"uuid": "^8.3.2",
|
"uuid": "^8.3.2",
|
||||||
"webpack": "^5.53.0",
|
"webpack": "^5.53.0",
|
||||||
"webpack-bundle-analyzer": "^4.4.2",
|
"webpack-bundle-analyzer": "^4.4.2",
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -49,7 +49,7 @@
|
|||||||
"@nextui-org/shared-icons": "workspace:*",
|
"@nextui-org/shared-icons": "workspace:*",
|
||||||
"@nextui-org/test-utils": "workspace:*",
|
"@nextui-org/test-utils": "workspace:*",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,4 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
|
},
|
||||||
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import {render} from "@testing-library/react";
|
import {render} from "@testing-library/react";
|
||||||
|
import {Avatar} from "@nextui-org/avatar";
|
||||||
|
|
||||||
import {Badge} from "../src";
|
import {Badge} from "../src";
|
||||||
|
|
||||||
|
const content = <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />;
|
||||||
|
|
||||||
describe("Badge", () => {
|
describe("Badge", () => {
|
||||||
it("should render correctly", () => {
|
it("should render correctly", () => {
|
||||||
const wrapper = render(<Badge>New</Badge>);
|
const wrapper = render(<Badge>New</Badge>);
|
||||||
@ -13,7 +16,7 @@ describe("Badge", () => {
|
|||||||
it("ref should be forwarded", () => {
|
it("ref should be forwarded", () => {
|
||||||
const ref = React.createRef<HTMLSpanElement>();
|
const ref = React.createRef<HTMLSpanElement>();
|
||||||
|
|
||||||
render(<Badge ref={ref} />);
|
render(<Badge ref={ref}>{content}</Badge>);
|
||||||
expect(ref.current).not.toBeNull();
|
expect(ref.current).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -28,32 +31,6 @@ describe("Badge", () => {
|
|||||||
expect(wrapper.getByTestId("badge-children")).toBeTruthy();
|
expect(wrapper.getByTestId("badge-children")).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should not render children if variant is dot", () => {
|
|
||||||
const wrapper = render(
|
|
||||||
<Badge variant="dot">
|
|
||||||
<span data-testid="badge-children">new</span>
|
|
||||||
</Badge>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.queryAllByTestId("badge-children")).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should not render children if variant is points", () => {
|
|
||||||
const wrapper = render(
|
|
||||||
<Badge variant="points">
|
|
||||||
<span data-testid="badge-children">new</span>
|
|
||||||
</Badge>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.queryAllByTestId("badge-children")).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should have 3 points if variant is points", () => {
|
|
||||||
const wrapper = render(<Badge variant="points" />);
|
|
||||||
|
|
||||||
expect(wrapper.getAllByTestId("badge-point")).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should be invisible if invisible is true", () => {
|
it("should be invisible if invisible is true", () => {
|
||||||
const wrapper = render(
|
const wrapper = render(
|
||||||
<Badge isInvisible content={<span data-testid="badge-content" />} data-testid="badge-root">
|
<Badge isInvisible content={<span data-testid="badge-content" />} data-testid="badge-root">
|
||||||
@ -61,6 +38,6 @@ describe("Badge", () => {
|
|||||||
</Badge>,
|
</Badge>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(wrapper.getByTestId("badge-root")).toHaveClass("nextui-badge--is-invisible");
|
expect(wrapper.getByTestId("badge-root")).toHaveAttribute("data-invisible", "true");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -46,7 +46,7 @@
|
|||||||
"@nextui-org/avatar": "workspace:*",
|
"@nextui-org/avatar": "workspace:*",
|
||||||
"@nextui-org/shared-icons": "workspace:*",
|
"@nextui-org/shared-icons": "workspace:*",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,118 +0,0 @@
|
|||||||
import {keyframes} from "@nextui-org/system";
|
|
||||||
|
|
||||||
export const pointAnimation = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
"50%": {
|
|
||||||
opacity: "0.4",
|
|
||||||
transform: "scale(0.5)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceInTopRight = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(50%, -50%)",
|
|
||||||
},
|
|
||||||
"60%": {
|
|
||||||
opacity: 0.75,
|
|
||||||
transform: "scale(1.2) translate(50%, -50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(50%, -50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceOutTopRight = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(50%, -50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(50%, -50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceInTopLeft = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(-50%, -50%)",
|
|
||||||
},
|
|
||||||
"60%": {
|
|
||||||
opacity: 0.75,
|
|
||||||
transform: "scale(1.2) translate(-50%, -50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(-50%, -50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceOutTopLeft = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(-50%, -50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(-50%, -50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceInBottomRight = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(50%, 50%)",
|
|
||||||
},
|
|
||||||
"60%": {
|
|
||||||
opacity: 0.75,
|
|
||||||
transform: "scale(1.2) translate(50%, 50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(50%, 50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceOutBottomRight = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(50%, 50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(50%, 50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceInBottomLeft = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(-50%, 50%)",
|
|
||||||
},
|
|
||||||
"60%": {
|
|
||||||
opacity: 0.75,
|
|
||||||
transform: "scale(1.2) translate(-50%, 50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(-50%, 50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const appearanceOutBottomLeft = keyframes({
|
|
||||||
"0%": {
|
|
||||||
opacity: 1,
|
|
||||||
transform: "scale(1) translate(-50%, 50%)",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
opacity: 0,
|
|
||||||
transform: "scale(0.2) translate(-50%, 50%)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,529 +0,0 @@
|
|||||||
import {styled} from "@nextui-org/system";
|
|
||||||
|
|
||||||
import {
|
|
||||||
pointAnimation,
|
|
||||||
appearanceInTopRight,
|
|
||||||
appearanceOutTopRight,
|
|
||||||
appearanceInTopLeft,
|
|
||||||
appearanceOutTopLeft,
|
|
||||||
appearanceInBottomRight,
|
|
||||||
appearanceOutBottomRight,
|
|
||||||
appearanceInBottomLeft,
|
|
||||||
appearanceOutBottomLeft,
|
|
||||||
} from "./badge.animations";
|
|
||||||
|
|
||||||
export const StyledBadgeRoot = styled("span", {
|
|
||||||
d: "inline-flex",
|
|
||||||
flexShrink: 0,
|
|
||||||
verticalAlign: "middle",
|
|
||||||
position: "relative",
|
|
||||||
overflow: "visible",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const StyledBadge = styled("span", {
|
|
||||||
$$badgePlacementHOffset: "0%",
|
|
||||||
$$badgePlacementVOffset: "0%",
|
|
||||||
lineHeight: 1,
|
|
||||||
display: "flex",
|
|
||||||
flexFlow: "row wrap",
|
|
||||||
placeContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
boxSizing: "border-box",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
bg: "$$badgeBackgroundColor",
|
|
||||||
color: "$$badgeTextColor",
|
|
||||||
fontWeight: "$bold",
|
|
||||||
fontSize: "$$badgeFontSize",
|
|
||||||
p: "$$badgeVPadding $$badgeHPadding",
|
|
||||||
"@motion": {
|
|
||||||
animation: "none",
|
|
||||||
transition: "none",
|
|
||||||
"&.nextui-badge--is-invisible": {
|
|
||||||
animation: "none",
|
|
||||||
transition: "none",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
variants: {
|
|
||||||
size: {
|
|
||||||
xs: {
|
|
||||||
$$badgeVPadding: "$space$2",
|
|
||||||
$$badgeHPadding: "$space$2",
|
|
||||||
$$badgeFontSize: "0.65rem",
|
|
||||||
},
|
|
||||||
sm: {
|
|
||||||
$$badgeVPadding: "$space$2",
|
|
||||||
$$badgeHPadding: "$space$3",
|
|
||||||
$$badgeFontSize: "0.73rem",
|
|
||||||
},
|
|
||||||
md: {
|
|
||||||
$$badgeVPadding: "$space$3",
|
|
||||||
$$badgeHPadding: "$space$4",
|
|
||||||
$$badgeFontSize: "$fontSizes$xs",
|
|
||||||
},
|
|
||||||
lg: {
|
|
||||||
$$badgeVPadding: "$space$4",
|
|
||||||
$$badgeHPadding: "$space$5",
|
|
||||||
$$badgeFontSize: "$fontSizes$base",
|
|
||||||
},
|
|
||||||
xl: {
|
|
||||||
$$badgeVPadding: "$space$5",
|
|
||||||
$$badgeHPadding: "$space$6",
|
|
||||||
$$badgeFontSize: "$fontSizes$xl",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
shape: {
|
|
||||||
circle: {},
|
|
||||||
rectangle: {},
|
|
||||||
},
|
|
||||||
asChild: {
|
|
||||||
true: {
|
|
||||||
zIndex: "$2",
|
|
||||||
position: "absolute",
|
|
||||||
lineHeight: 1.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
isOneChar: {
|
|
||||||
true: {},
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
default: {
|
|
||||||
$$badgeBackgroundColor: "$colors$neutral",
|
|
||||||
$$badgeTextColor: "$colors$neutralSolidContrast",
|
|
||||||
$$badgeShadowColor: "$colors$neutralShadow",
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
$$badgeBackgroundColor: "$colors$primary",
|
|
||||||
$$badgeTextColor: "$colors$primarySolidContrast",
|
|
||||||
$$badgeShadowColor: "$colors$primaryShadow",
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
$$badgeBackgroundColor: "$colors$secondary",
|
|
||||||
$$badgeTextColor: "$colors$secondarySolidContrast",
|
|
||||||
$$badgeShadowColor: "$colors$secondaryShadow",
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
$$badgeBackgroundColor: "$colors$success",
|
|
||||||
$$badgeTextColor: "$colors$successSolidContrast",
|
|
||||||
$$badgeShadowColor: "$colors$successShadow",
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
$$badgeBackgroundColor: "$colors$warning",
|
|
||||||
$$badgeTextColor: "$colors$warningSolidContrast",
|
|
||||||
$$badgeShadowColor: "$colors$warningShadow",
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
$$badgeBackgroundColor: "$colors$error",
|
|
||||||
$$badgeTextColor: "$colors$errorSolidContrast",
|
|
||||||
$$badgeShadowColor: "$colors$errorShadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
enableShadow: {
|
|
||||||
true: {
|
|
||||||
boxShadow: "0 2px 10px 0 $$badgeShadowColor",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
isSquared: {
|
|
||||||
true: {
|
|
||||||
borderRadius: "calc($$badgeFontSize * 0.45)",
|
|
||||||
},
|
|
||||||
false: {
|
|
||||||
borderRadius: "$pill",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
placement: {
|
|
||||||
"top-right": {
|
|
||||||
animation: `${appearanceInTopRight} 0.25s ease-out`,
|
|
||||||
"&.nextui-badge--is-invisible": {
|
|
||||||
opacity: 0,
|
|
||||||
animation: `${appearanceOutTopRight} 0.2s ease-in`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"top-left": {
|
|
||||||
animation: `${appearanceInTopLeft} 0.25s ease-out`,
|
|
||||||
"&.nextui-badge--is-invisible": {
|
|
||||||
opacity: 0,
|
|
||||||
animation: `${appearanceOutTopLeft} 0.2s ease-in`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"bottom-right": {
|
|
||||||
animation: `${appearanceInBottomRight} 0.25s ease-out`,
|
|
||||||
"&.nextui-badge--is-invisible": {
|
|
||||||
opacity: 0,
|
|
||||||
animation: `${appearanceOutBottomRight} 0.2s ease-in`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"bottom-left": {
|
|
||||||
animation: `${appearanceInBottomLeft} 0.25s ease-out`,
|
|
||||||
"&.nextui-badge--is-invisible": {
|
|
||||||
opacity: 0,
|
|
||||||
animation: `${appearanceOutBottomLeft} 0.2s ease-in`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
variant: {
|
|
||||||
default: {},
|
|
||||||
flat: {},
|
|
||||||
dot: {
|
|
||||||
p: 0,
|
|
||||||
dflex: "center",
|
|
||||||
minSize: "$$badgeFontSize",
|
|
||||||
boxSizing: "border-box",
|
|
||||||
},
|
|
||||||
points: {
|
|
||||||
p: "calc($$badgeFontSize * 0.4)",
|
|
||||||
boxSizing: "border-box",
|
|
||||||
$$badgePlacementHOffset: "calc($$badgeFontSize * 0.8)",
|
|
||||||
},
|
|
||||||
bordered: {
|
|
||||||
$$badgeBackgroundColor: "$colors$background",
|
|
||||||
bg: "$background",
|
|
||||||
bw: "$$badgeBorderWeight",
|
|
||||||
borderStyle: "solid",
|
|
||||||
borderColor: "$$badgeTextColor",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
borderWeight: {
|
|
||||||
light: {
|
|
||||||
$$badgeBorderWeight: "$borderWeights$light",
|
|
||||||
},
|
|
||||||
normal: {
|
|
||||||
$$badgeBorderWeight: "$borderWeights$normal",
|
|
||||||
},
|
|
||||||
bold: {
|
|
||||||
$$badgeBorderWeight: "$borderWeights$bold",
|
|
||||||
},
|
|
||||||
extrabold: {
|
|
||||||
$$badgeBorderWeight: "$borderWeights$extrabold",
|
|
||||||
},
|
|
||||||
black: {
|
|
||||||
$$badgeBorderWeight: "$borderWeights$black",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
disableOutline: {
|
|
||||||
true: {
|
|
||||||
border: "2px solid transparent",
|
|
||||||
},
|
|
||||||
false: {
|
|
||||||
border: "2px solid $colors$background",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
disableAnimation: {
|
|
||||||
true: {
|
|
||||||
animation: "none",
|
|
||||||
transition: "none",
|
|
||||||
"&.nextui-badge--is-invisible": {
|
|
||||||
animation: "none",
|
|
||||||
transition: "none",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
compoundVariants: [
|
|
||||||
/***
|
|
||||||
* @variant flat
|
|
||||||
* @color {default, primary, secondary, success, warning, error}
|
|
||||||
*/
|
|
||||||
// variant=flat && color=default
|
|
||||||
{
|
|
||||||
variant: "flat",
|
|
||||||
color: "default",
|
|
||||||
css: {
|
|
||||||
$$badgeBackgroundColor: "$colors$neutralLight",
|
|
||||||
$$badgeTextColor: "$colors$neutralLightContrast",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=flat && color=primary
|
|
||||||
{
|
|
||||||
variant: "flat",
|
|
||||||
color: "primary",
|
|
||||||
css: {
|
|
||||||
$$badgeBackgroundColor: "$colors$primaryLight",
|
|
||||||
$$badgeTextColor: "$colors$primaryLightContrast",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=flat && color=secondary
|
|
||||||
{
|
|
||||||
variant: "flat",
|
|
||||||
color: "secondary",
|
|
||||||
css: {
|
|
||||||
$$badgeBackgroundColor: "$colors$secondaryLight",
|
|
||||||
$$badgeTextColor: "$colors$secondaryLightContrast",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=flat && color=success
|
|
||||||
{
|
|
||||||
variant: "flat",
|
|
||||||
color: "success",
|
|
||||||
css: {
|
|
||||||
$$badgeBackgroundColor: "$colors$successLight",
|
|
||||||
$$badgeTextColor: "$colors$successLightContrast",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=flat && color=warning
|
|
||||||
{
|
|
||||||
variant: "flat",
|
|
||||||
color: "warning",
|
|
||||||
css: {
|
|
||||||
$$badgeBackgroundColor: "$colors$warningLight",
|
|
||||||
$$badgeTextColor: "$colors$warningLightContrast",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=flat && color=error
|
|
||||||
{
|
|
||||||
variant: "flat",
|
|
||||||
color: "error",
|
|
||||||
css: {
|
|
||||||
$$badgeBackgroundColor: "$colors$errorLight",
|
|
||||||
$$badgeTextColor: "$colors$errorLightContrast",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/***
|
|
||||||
* @variant bordered
|
|
||||||
* @color {default, primary, secondary, success, warning, error}
|
|
||||||
*/
|
|
||||||
// variant=bordered && color=default
|
|
||||||
{
|
|
||||||
variant: "bordered",
|
|
||||||
color: "default",
|
|
||||||
css: {
|
|
||||||
$$badgeTextColor: "$colors$neutral",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=bordered && color=primary
|
|
||||||
{
|
|
||||||
variant: "bordered",
|
|
||||||
color: "primary",
|
|
||||||
css: {
|
|
||||||
$$badgeTextColor: "$colors$primary",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=bordered && color=secondary
|
|
||||||
{
|
|
||||||
variant: "bordered",
|
|
||||||
color: "secondary",
|
|
||||||
css: {
|
|
||||||
$$badgeTextColor: "$colors$secondary",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=bordered && color=success
|
|
||||||
{
|
|
||||||
variant: "bordered",
|
|
||||||
color: "success",
|
|
||||||
css: {
|
|
||||||
$$badgeTextColor: "$colors$success",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=bordered && color=warning
|
|
||||||
{
|
|
||||||
variant: "bordered",
|
|
||||||
color: "warning",
|
|
||||||
css: {
|
|
||||||
$$badgeTextColor: "$colors$warning",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// variant=bordered && color=error
|
|
||||||
{
|
|
||||||
variant: "bordered",
|
|
||||||
color: "error",
|
|
||||||
css: {
|
|
||||||
$$badgeTextColor: "$colors$error",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/***
|
|
||||||
* @asChild true
|
|
||||||
* @shape {rectangle, circle}
|
|
||||||
* @placement {top-right, top-left, bottom-right, bottom-left}
|
|
||||||
*/
|
|
||||||
// placement=top-right && shape=rectangle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "rectangle",
|
|
||||||
placement: "top-right",
|
|
||||||
css: {
|
|
||||||
top: "calc(5% + $$badgePlacementVOffset)",
|
|
||||||
right: "calc(5% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(50%, -50%)",
|
|
||||||
transformOrigin: "100% 0%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=top-left && shape=rectangle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "rectangle",
|
|
||||||
placement: "top-left",
|
|
||||||
css: {
|
|
||||||
top: "calc(5% + $$badgePlacementVOffset)",
|
|
||||||
left: "calc(5% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(-50%, -50%)",
|
|
||||||
transformOrigin: "0% 0%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=bottom-right && shape=rectangle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "rectangle",
|
|
||||||
placement: "bottom-right",
|
|
||||||
css: {
|
|
||||||
bottom: "calc(5% + $$badgePlacementVOffset)",
|
|
||||||
right: "calc(5% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(50%, 50%)",
|
|
||||||
transformOrigin: "100% 100%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=bottom-left && shape=rectangle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "rectangle",
|
|
||||||
placement: "bottom-left",
|
|
||||||
css: {
|
|
||||||
bottom: "calc(5% + $$badgePlacementVOffset)",
|
|
||||||
left: "calc(5% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(-50%, 50%)",
|
|
||||||
transformOrigin: "0% 100%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=top-right && shape=circle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "circle",
|
|
||||||
placement: "top-right",
|
|
||||||
css: {
|
|
||||||
top: "calc(15% + $$badgePlacementVOffset)",
|
|
||||||
right: "calc(15% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(50%, -50%)",
|
|
||||||
transformOrigin: "100% 0%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=top-left && shape=circle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "circle",
|
|
||||||
placement: "top-left",
|
|
||||||
css: {
|
|
||||||
top: "calc(15% + $$badgePlacementVOffset)",
|
|
||||||
left: "calc(15% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(-50%, -50%)",
|
|
||||||
transformOrigin: "0% 0%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=bottom-right && shape=circle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "circle",
|
|
||||||
placement: "bottom-right",
|
|
||||||
css: {
|
|
||||||
bottom: "calc(15% + $$badgePlacementVOffset)",
|
|
||||||
right: "calc(15% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(50%, 50%)",
|
|
||||||
transformOrigin: "100% 100%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// placement=bottom-left && shape=circle
|
|
||||||
{
|
|
||||||
asChild: true,
|
|
||||||
shape: "circle",
|
|
||||||
placement: "bottom-left",
|
|
||||||
css: {
|
|
||||||
bottom: "calc(15% + $$badgePlacementVOffset)",
|
|
||||||
left: "calc(15% + $$badgePlacementHOffset)",
|
|
||||||
transform: "scale(1) translate(-50%, 50%)",
|
|
||||||
transformOrigin: "0% 100%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @variant dot
|
|
||||||
* @shape rectangle
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
variant: "dot",
|
|
||||||
shape: "rectangle",
|
|
||||||
css: {
|
|
||||||
$$badgePlacementHOffset: "calc($$badgeFontSize * 0.2)",
|
|
||||||
$$badgePlacementVOffset: "calc($$badgeFontSize * 0.1)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @isOneChar {true, false}
|
|
||||||
* @asChild {true, false}
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
isOneChar: true,
|
|
||||||
asChild: true,
|
|
||||||
css: {
|
|
||||||
p: 0,
|
|
||||||
size: "calc($$badgeFontSize + $$badgeHPadding)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
isOneChar: false,
|
|
||||||
asChild: true,
|
|
||||||
css: {
|
|
||||||
$$badgeVPadding: "0px",
|
|
||||||
$$badgeHPadding: "$space$2",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @isOneChar false
|
|
||||||
* @asChild true
|
|
||||||
* @size {md, lg, xl}
|
|
||||||
*/
|
|
||||||
// size = md
|
|
||||||
{
|
|
||||||
isOneChar: false,
|
|
||||||
asChild: true,
|
|
||||||
size: "md",
|
|
||||||
css: {
|
|
||||||
$$badgeHPadding: "$space$3",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// size = lg
|
|
||||||
{
|
|
||||||
isOneChar: false,
|
|
||||||
asChild: true,
|
|
||||||
size: "lg",
|
|
||||||
css: {
|
|
||||||
$$badgeHPadding: "$space$4",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// size = xl
|
|
||||||
{
|
|
||||||
isOneChar: false,
|
|
||||||
asChild: true,
|
|
||||||
size: "xl",
|
|
||||||
css: {
|
|
||||||
$$badgeHPadding: "$space$5",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @disableOutline true
|
|
||||||
* @variant bordered
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
disableOutline: true,
|
|
||||||
variant: "bordered",
|
|
||||||
css: {
|
|
||||||
borderColor: "$$badgeTextColor",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const StyledBadgePoints = styled("div", {
|
|
||||||
position: "relative",
|
|
||||||
dflex: "center",
|
|
||||||
"& .nextui-badge-point": {
|
|
||||||
size: "calc($$badgeFontSize * 0.3)",
|
|
||||||
background: "$$badgeTextColor",
|
|
||||||
margin: "0 2px",
|
|
||||||
borderRadius: "$pill",
|
|
||||||
"&:nth-child(1)": {
|
|
||||||
animation: `${pointAnimation} 1.2s ease infinite`,
|
|
||||||
},
|
|
||||||
"&:nth-child(2)": {
|
|
||||||
animation: `${pointAnimation} 1.2s ease infinite 0.4s`,
|
|
||||||
},
|
|
||||||
"&:nth-child(3)": {
|
|
||||||
animation: `${pointAnimation} 1.2s ease infinite 0.8s`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,9 +1,13 @@
|
|||||||
|
import type {ReactNode} from "react";
|
||||||
|
|
||||||
import {forwardRef} from "@nextui-org/system";
|
import {forwardRef} from "@nextui-org/system";
|
||||||
import {__DEV__} from "@nextui-org/shared-utils";
|
import {__DEV__} from "@nextui-org/shared-utils";
|
||||||
|
|
||||||
import {UseBadgeProps, useBadge} from "./use-badge";
|
import {UseBadgeProps, useBadge} from "./use-badge";
|
||||||
|
|
||||||
export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {}
|
export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
|
const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
|
||||||
const {Component, children, content, slots, styles, getBadgeProps} = useBadge({ref, ...props});
|
const {Component, children, content, slots, styles, getBadgeProps} = useBadge({ref, ...props});
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
// export types
|
// export types
|
||||||
export type {BadgeProps} from "./badge";
|
export type {BadgeProps} from "./badge";
|
||||||
|
|
||||||
|
// export hooks
|
||||||
|
export {useBadge} from "./use-badge";
|
||||||
|
|
||||||
// export component
|
// export component
|
||||||
export {default as Badge} from "./badge";
|
export {default as Badge} from "./badge";
|
||||||
|
|||||||
@ -1,603 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {Meta} from "@storybook/react";
|
|
||||||
|
|
||||||
// Row, Spacer, Grid, Avatar, Switch, Text
|
|
||||||
import {Col} from "@nextui-org/col";
|
|
||||||
import {Row} from "@nextui-org/row";
|
|
||||||
import {Spacer} from "@nextui-org/spacer";
|
|
||||||
import {Grid} from "@nextui-org/grid";
|
|
||||||
import {Avatar} from "@nextui-org/avatar";
|
|
||||||
// import {Switch} from "@nextui-org/switch"; TODO: create
|
|
||||||
// import {Text} from "@nextui-org/text";
|
|
||||||
import {Notification} from "@nextui-org/shared-icons";
|
|
||||||
|
|
||||||
import {Badge} from "../src";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: "Display/Badge",
|
|
||||||
component: Badge,
|
|
||||||
} as Meta;
|
|
||||||
|
|
||||||
export const Default = () => <Badge>Default</Badge>;
|
|
||||||
|
|
||||||
export const WithAvatar = () => (
|
|
||||||
<Grid.Container gap={1} justify="center">
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5}>
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} placement="bottom-right" shape="circle">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
</Grid.Container>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const WithIcon = () => (
|
|
||||||
<Badge color="error" content={5} horizontalOffset={2} shape="circle">
|
|
||||||
<Notification fill="currentColor" size={30} />
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const WithContentIcon = () => (
|
|
||||||
<Badge
|
|
||||||
color="error"
|
|
||||||
content={<Notification fill="currentColor" size={12} />}
|
|
||||||
css={{p: "$2"}}
|
|
||||||
horizontalOffset={2}
|
|
||||||
shape="circle"
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
|
|
||||||
// TODO: create switch
|
|
||||||
// export const ToggleBadge = () => {
|
|
||||||
// const [isInvisible, setIsInvisible] = React.useState(false);
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <Grid.Container alignItems="center" gap={2}>
|
|
||||||
// <Grid>
|
|
||||||
// <Badge color="error" content={5} isInvisible={isInvisible} shape="circle">
|
|
||||||
// <Notification fill="currentColor" size={30} />
|
|
||||||
// </Badge>
|
|
||||||
// </Grid>
|
|
||||||
// <Grid>
|
|
||||||
// <Badge color="error" content={50} isInvisible={isInvisible} shape="circle">
|
|
||||||
// <CartIcon fill="currentColor" size={30} />
|
|
||||||
// </Badge>
|
|
||||||
// </Grid>
|
|
||||||
// <Grid>
|
|
||||||
// <Row align="center">
|
|
||||||
// <Switch initialChecked onChange={(ev) => setIsInvisible(!ev.target.checked)} />
|
|
||||||
// <Text css={{ml: "$3"}}>Show badge</Text>
|
|
||||||
// </Row>
|
|
||||||
// </Grid>
|
|
||||||
// </Grid.Container>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
export const WithContentPlacements = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Grid.Container gap={1} justify="center">
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} size="xs">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} placement="bottom-right" size="md">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
</Grid.Container>
|
|
||||||
<Grid.Container gap={1} justify="center">
|
|
||||||
<Grid>
|
|
||||||
<Badge
|
|
||||||
isInvisible
|
|
||||||
color="primary"
|
|
||||||
content={5}
|
|
||||||
placement="bottom-right"
|
|
||||||
size="md"
|
|
||||||
variant="points"
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
color="primary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge
|
|
||||||
color="success"
|
|
||||||
content={5}
|
|
||||||
placement="bottom-right"
|
|
||||||
shape="circle"
|
|
||||||
size="md"
|
|
||||||
variant="dot"
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
color="success"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
</Grid.Container>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Sizes = () => (
|
|
||||||
<Grid.Container>
|
|
||||||
<Grid.Container alignItems="center" gap={1} justify="center">
|
|
||||||
<Grid>
|
|
||||||
<Badge size="xs">New (xs)</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge size="sm">New (sm)</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge size="md">New (md)</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge size="lg">New (lg)</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge size="xl">New (xl)</Badge>
|
|
||||||
</Grid>
|
|
||||||
</Grid.Container>
|
|
||||||
<Spacer y={1} />
|
|
||||||
<Grid.Container gap={1} justify="center">
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="xs" size="xs">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="sm" size="sm">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="md" size="md">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="lg" size="lg">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="xl" size="xl">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
</Grid.Container>
|
|
||||||
<Spacer y={1} />
|
|
||||||
<Grid.Container gap={2} justify="center">
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="999+" size="xs">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="999+" size="sm">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="999+" size="md">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="999+" size="lg">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
<Grid>
|
|
||||||
<Badge color="error" content="999+" size="xl">
|
|
||||||
<Avatar
|
|
||||||
bordered
|
|
||||||
pointer
|
|
||||||
squared
|
|
||||||
color="secondary"
|
|
||||||
size="lg"
|
|
||||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
</Grid>
|
|
||||||
</Grid.Container>
|
|
||||||
</Grid.Container>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Squared = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared size="xs">
|
|
||||||
New (xs)
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared size="sm">
|
|
||||||
New (sm)
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared size="md">
|
|
||||||
New (md)
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared size="lg">
|
|
||||||
New (lg)
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared size="xl">
|
|
||||||
New (xl)
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Colors = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge>Neutral</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="primary">Primary</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="secondary">Secondary</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="success">Success</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="warning">Warning</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="error">Error</Badge>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const EnableShadow = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge disableOutline enableShadow>
|
|
||||||
Neutral
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge disableOutline enableShadow color="primary">
|
|
||||||
Primary
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge disableOutline enableShadow color="secondary">
|
|
||||||
Secondary
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge disableOutline enableShadow color="success">
|
|
||||||
Success
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge disableOutline enableShadow color="warning">
|
|
||||||
Warning
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge disableOutline enableShadow color="error">
|
|
||||||
Error
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const FlatVariant = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge variant="flat">Neutral</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="primary" variant="flat">
|
|
||||||
Primary
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="secondary" variant="flat">
|
|
||||||
Secondary
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="success" variant="flat">
|
|
||||||
Success
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="warning" variant="flat">
|
|
||||||
Warning
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="error" variant="flat">
|
|
||||||
Error
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const BorderedVariant = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge variant="bordered">Neutral</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="primary" variant="bordered">
|
|
||||||
Primary
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="secondary" variant="bordered">
|
|
||||||
Secondary
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="success" variant="bordered">
|
|
||||||
Success
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="warning" variant="bordered">
|
|
||||||
Warning
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="error" variant="bordered">
|
|
||||||
Error
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const DotVariant = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge size="xl" variant="dot">
|
|
||||||
<span>new</span>
|
|
||||||
</Badge>
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="primary" size="xl" variant="dot" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="secondary" size="xl" variant="dot" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="success" size="xl" variant="dot" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="warning" size="xl" variant="dot" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge color="error" size="xl" variant="dot" />
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const PointsVariant = () => (
|
|
||||||
<Col css={{pl: "$6"}}>
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared size="xs" variant="points" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared color="primary" size="sm" variant="points" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared color="secondary" size="md" variant="points" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared color="success" size="lg" variant="points" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared color="warning" size="xl" variant="points" />
|
|
||||||
</Row>
|
|
||||||
<Spacer y={0.5} />
|
|
||||||
<Row>
|
|
||||||
<Badge isSquared color="error" size="xl" variant="points" />
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import React from "react";
|
||||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||||
import {badge} from "@nextui-org/theme";
|
import {badge} from "@nextui-org/theme";
|
||||||
import {Avatar} from "@nextui-org/avatar";
|
import {Avatar} from "@nextui-org/avatar";
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -54,7 +54,7 @@
|
|||||||
"@react-types/shared": "^3.15.0",
|
"@react-types/shared": "^3.15.0",
|
||||||
"@react-types/button": "^3.6.2",
|
"@react-types/button": "^3.6.2",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -52,7 +52,7 @@
|
|||||||
"@nextui-org/code": "workspace:*",
|
"@nextui-org/code": "workspace:*",
|
||||||
"@nextui-org/link": "workspace:*",
|
"@nextui-org/link": "workspace:*",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -53,7 +53,7 @@
|
|||||||
"@react-types/checkbox": "^3.4.2",
|
"@react-types/checkbox": "^3.4.2",
|
||||||
"@react-types/shared": "^3.17.0",
|
"@react-types/shared": "^3.17.0",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/dom-utils": "workspace:*",
|
"@nextui-org/dom-utils": "workspace:*",
|
||||||
@ -50,7 +50,7 @@
|
|||||||
"@nextui-org/avatar": "workspace:*",
|
"@nextui-org/avatar": "workspace:*",
|
||||||
"@react-types/checkbox": "^3.4.2",
|
"@react-types/checkbox": "^3.4.2",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
import Chip from "./chip";
|
|
||||||
|
|
||||||
// export types
|
// export types
|
||||||
export type {ChipProps} from "./chip";
|
export type {ChipProps} from "./chip";
|
||||||
|
|
||||||
@ -7,4 +5,4 @@ export type {ChipProps} from "./chip";
|
|||||||
export {useChip} from "./use-chip";
|
export {useChip} from "./use-chip";
|
||||||
|
|
||||||
// export component
|
// export component
|
||||||
export {Chip};
|
export {default as Chip} from "./chip";
|
||||||
|
|||||||
@ -101,6 +101,7 @@ export function useChip(originalProps: UseChipProps) {
|
|||||||
const getContentClone = (content: ReactNode) =>
|
const getContentClone = (content: ReactNode) =>
|
||||||
isValidElement(content)
|
isValidElement(content)
|
||||||
? cloneElement(content, {
|
? cloneElement(content, {
|
||||||
|
// @ts-ignore
|
||||||
className: clsx("w-full h-4/5", content.props.className),
|
className: clsx("w-full h-4/5", content.props.className),
|
||||||
})
|
})
|
||||||
: null;
|
: null;
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -44,7 +44,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -52,7 +52,7 @@
|
|||||||
"@react-types/shared": "^3.15.0",
|
"@react-types/shared": "^3.15.0",
|
||||||
"@react-types/accordion": "3.0.0-alpha.12",
|
"@react-types/accordion": "3.0.0-alpha.12",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -44,7 +44,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -46,7 +46,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/dom-utils": "workspace:*",
|
"@nextui-org/dom-utils": "workspace:*",
|
||||||
@ -48,7 +48,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@react-types/link": "^3.4.0",
|
"@react-types/link": "^3.4.0",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,4 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
|
},
|
||||||
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -46,7 +46,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/dom-utils": "workspace:*",
|
"@nextui-org/dom-utils": "workspace:*",
|
||||||
@ -53,7 +53,7 @@
|
|||||||
"@react-types/shared": "^3.15.0",
|
"@react-types/shared": "^3.15.0",
|
||||||
"@nextui-org/button": "workspace:*",
|
"@nextui-org/button": "workspace:*",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -48,7 +48,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -46,7 +46,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/dom-utils": "workspace:*",
|
"@nextui-org/dom-utils": "workspace:*",
|
||||||
@ -54,7 +54,7 @@
|
|||||||
"@react-types/tooltip": "^3.3.0",
|
"@react-types/tooltip": "^3.3.0",
|
||||||
"@nextui-org/button": "workspace:*",
|
"@nextui-org/button": "workspace:*",
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/system": "workspace:*",
|
"@nextui-org/system": "workspace:*",
|
||||||
@ -48,7 +48,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"@nextui-org/link": "workspace:*",
|
"@nextui-org/link": "workspace:*",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -57,12 +57,10 @@
|
|||||||
"@nextui-org/user": "workspace:*"
|
"@nextui-org/user": "workspace:*"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0",
|
"react": ">=18"
|
||||||
"@stitches/react": ">=1.2.8"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"react": "18.2.0",
|
"react": "^18.0.0",
|
||||||
"@stitches/react": "1.2.8",
|
|
||||||
"clean-package": "2.2.0"
|
"clean-package": "2.2.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
|
|||||||
@ -1,9 +1,4 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
|
||||||
"paths": {
|
|
||||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"include": ["src", "index.ts"]
|
"include": ["src", "index.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,18 +34,13 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/shared-utils": "workspace:*",
|
"@react-aria/ssr": "^3.5.0"
|
||||||
"@nextui-org/use-ssr": "workspace:*",
|
|
||||||
"@react-aria/ssr": "^3.5.0",
|
|
||||||
"@react-aria/overlays": "^3.13.0"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0",
|
"react": ">=18"
|
||||||
"@stitches/react": ">=1.2.8"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"react": "^18.2.0",
|
"react": "^18.0.0",
|
||||||
"@stitches/react": "1.2.8",
|
|
||||||
"clean-package": "2.2.0"
|
"clean-package": "2.2.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
|
|||||||
@ -1,25 +0,0 @@
|
|||||||
export const blue = {
|
|
||||||
blue50: "#EDF5FF",
|
|
||||||
blue100: "#E1EFFF",
|
|
||||||
blue200: "#CEE4FE",
|
|
||||||
blue300: "#B7D5F8",
|
|
||||||
blue400: "#96C1F2",
|
|
||||||
blue500: "#5EA2EF",
|
|
||||||
blue600: "#0072F5",
|
|
||||||
blue700: "#005FCC",
|
|
||||||
blue800: "#004799",
|
|
||||||
blue900: "#00254D",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const blueDark = {
|
|
||||||
blue50: "#10253E",
|
|
||||||
blue100: "#102C4C",
|
|
||||||
blue200: "#0F3158",
|
|
||||||
blue300: "#0D3868",
|
|
||||||
blue400: "#0A4281",
|
|
||||||
blue500: "#0952A5",
|
|
||||||
blue600: "#0072F5",
|
|
||||||
blue700: "#3694FF",
|
|
||||||
blue800: "#3694FF",
|
|
||||||
blue900: "#EAF4FF",
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const cyan = {
|
|
||||||
cyan50: "#F0FCFF",
|
|
||||||
cyan100: "#E6FAFE",
|
|
||||||
cyan200: "#D7F8FE",
|
|
||||||
cyan300: "#C3F4FD",
|
|
||||||
cyan400: "#A5EEFD",
|
|
||||||
cyan500: "#7EE7FC",
|
|
||||||
cyan600: "#06B7DB",
|
|
||||||
cyan700: "#09AACD",
|
|
||||||
cyan800: "#0E8AAA",
|
|
||||||
cyan900: "#053B48",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const cyanDark = {
|
|
||||||
cyan50: "#012A32",
|
|
||||||
cyan100: "#023A46",
|
|
||||||
cyan200: "#024B5A",
|
|
||||||
cyan300: "#036072",
|
|
||||||
cyan400: "#037086",
|
|
||||||
cyan500: "#048EA9",
|
|
||||||
cyan600: "#06B7DB",
|
|
||||||
cyan700: "#33D9FA",
|
|
||||||
cyan800: "#6FE4FB",
|
|
||||||
cyan900: "#EBFBFE",
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const gray = {
|
|
||||||
gray50: "#F1F3F5",
|
|
||||||
gray100: "#ECEEF0",
|
|
||||||
gray200: "#E6E8EB",
|
|
||||||
gray300: "#DFE3E6",
|
|
||||||
gray400: "#D7DBDF",
|
|
||||||
gray500: "#C1C8CD",
|
|
||||||
gray600: "#889096",
|
|
||||||
gray700: "#7E868C",
|
|
||||||
gray800: "#687076",
|
|
||||||
gray900: "#11181C",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const grayDark = {
|
|
||||||
gray50: "#16181A",
|
|
||||||
gray100: "#26292B",
|
|
||||||
gray200: "#2B2F31",
|
|
||||||
gray300: "#313538",
|
|
||||||
gray400: "#3A3F42",
|
|
||||||
gray500: "#4C5155",
|
|
||||||
gray600: "#697177",
|
|
||||||
gray700: "#787F85",
|
|
||||||
gray800: "#9BA1A6",
|
|
||||||
gray900: "#ECEDEE",
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const green = {
|
|
||||||
green50: "#F1FDF7",
|
|
||||||
green100: "#E8FCF1",
|
|
||||||
green200: "#DAFBE8",
|
|
||||||
green300: "#C8F9DD",
|
|
||||||
green400: "#ADF5CC",
|
|
||||||
green500: "#88F1B6",
|
|
||||||
green600: "#17C964",
|
|
||||||
green700: "#13A452",
|
|
||||||
green800: "#108944",
|
|
||||||
green900: "#06371B",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const greenDark = {
|
|
||||||
green50: "#042F14",
|
|
||||||
green100: "#06381B",
|
|
||||||
green200: "#074A24",
|
|
||||||
green300: "#0A6130",
|
|
||||||
green400: "#0B7439",
|
|
||||||
green500: "#0F9549",
|
|
||||||
green600: "#17C964",
|
|
||||||
green700: "#41EC8B",
|
|
||||||
green800: "#78F2AD",
|
|
||||||
green900: "#ECFDF4",
|
|
||||||
};
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export * from "./blue";
|
|
||||||
export * from "./purple";
|
|
||||||
export * from "./green";
|
|
||||||
export * from "./yellow";
|
|
||||||
export * from "./red";
|
|
||||||
export * from "./cyan";
|
|
||||||
export * from "./pink";
|
|
||||||
export * from "./gray";
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const pink = {
|
|
||||||
pink50: "#FFF0FB",
|
|
||||||
pink100: "#FFE5F8",
|
|
||||||
pink200: "#FFD6F3",
|
|
||||||
pink300: "#FFC2EE",
|
|
||||||
pink400: "#FFA3E5",
|
|
||||||
pink500: "#FF7AD9",
|
|
||||||
pink600: "#FF4ECD",
|
|
||||||
pink700: "#D6009A",
|
|
||||||
pink800: "#B80084",
|
|
||||||
pink900: "#4D0037",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const pinkDark = {
|
|
||||||
pink50: "#330025",
|
|
||||||
pink100: "#470033",
|
|
||||||
pink200: "#5C0042",
|
|
||||||
pink300: "#750054",
|
|
||||||
pink400: "#8A0063",
|
|
||||||
pink500: "#AD007C",
|
|
||||||
pink600: "#FF4ECD",
|
|
||||||
pink700: "#FF2EC4",
|
|
||||||
pink800: "#FF6BD5",
|
|
||||||
pink900: "#FFEBF9",
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const purple = {
|
|
||||||
purple50: "#F7F2FD",
|
|
||||||
purple100: "#F1E8FB",
|
|
||||||
purple200: "#EADCF8",
|
|
||||||
purple300: "#E0CBF5",
|
|
||||||
purple400: "#D1B1F0",
|
|
||||||
purple500: "#BC8EE9",
|
|
||||||
purple600: "#7828C8",
|
|
||||||
purple700: "#6622AA",
|
|
||||||
purple800: "#4D1980",
|
|
||||||
purple900: "#290E44",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const purpleDark = {
|
|
||||||
purple50: "#1F0A33",
|
|
||||||
purple100: "#240C3C",
|
|
||||||
purple200: "#2E0F4D",
|
|
||||||
purple300: "#3B1362",
|
|
||||||
purple400: "#451773",
|
|
||||||
purple500: "#571D91",
|
|
||||||
purple600: "#7828C8",
|
|
||||||
purple700: "#9750DD",
|
|
||||||
purple800: "#B583E7",
|
|
||||||
purple900: "#F7ECFC",
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const red = {
|
|
||||||
red50: "#FEF0F5",
|
|
||||||
red100: "#FEE7EF",
|
|
||||||
red200: "#FDD8E5",
|
|
||||||
red300: "#FCC5D8",
|
|
||||||
red400: "#FAA8C5",
|
|
||||||
red500: "#F881AB",
|
|
||||||
red600: "#F31260",
|
|
||||||
red700: "#B80A47",
|
|
||||||
red800: "#910838",
|
|
||||||
red900: "#4E041E",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const redDark = {
|
|
||||||
red50: "#300313",
|
|
||||||
red100: "#300313",
|
|
||||||
red200: "#44041A",
|
|
||||||
red300: "#5C0523",
|
|
||||||
red400: "#6F062B",
|
|
||||||
red500: "#910838",
|
|
||||||
red600: "#F31260",
|
|
||||||
red700: "#F4256D",
|
|
||||||
red800: "#F75F94",
|
|
||||||
red900: "#FDD8E5",
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export const yellow = {
|
|
||||||
yellow50: "#FEF9F0",
|
|
||||||
yellow100: "#FEF5E7",
|
|
||||||
yellow200: "#FDEFD8",
|
|
||||||
yellow300: "#FCE7C5",
|
|
||||||
yellow400: "#FBDBA7",
|
|
||||||
yellow500: "#F9CB80",
|
|
||||||
yellow600: "#F5A524",
|
|
||||||
yellow700: "#B97509",
|
|
||||||
yellow800: "#925D07",
|
|
||||||
yellow900: "#4E3104",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const yellowDark = {
|
|
||||||
yellow50: "#3A2503",
|
|
||||||
yellow100: "#442B03",
|
|
||||||
yellow200: "#583804",
|
|
||||||
yellow300: "#704705",
|
|
||||||
yellow400: "#845306",
|
|
||||||
yellow500: "#A66908",
|
|
||||||
yellow600: "#F5A524",
|
|
||||||
yellow700: "#F6AD37",
|
|
||||||
yellow800: "#F8C572",
|
|
||||||
yellow900: "#FEF7EC",
|
|
||||||
};
|
|
||||||
@ -1,609 +0,0 @@
|
|||||||
import {PropertyValue, defaultThemeMap as defaultStitchesThemeMap} from "@stitches/react";
|
|
||||||
|
|
||||||
const spaces = {
|
|
||||||
0: "0rem",
|
|
||||||
xs: "0.5rem",
|
|
||||||
sm: "0.75rem",
|
|
||||||
md: "1rem",
|
|
||||||
lg: "1.25rem",
|
|
||||||
xl: "2.25rem",
|
|
||||||
"2xl": "3rem",
|
|
||||||
"3xl": "5rem",
|
|
||||||
"4xl": "10rem",
|
|
||||||
"5xl": "14rem",
|
|
||||||
"6xl": "18rem",
|
|
||||||
"7xl": "24rem",
|
|
||||||
"8xl": "32rem",
|
|
||||||
"9xl": "40rem",
|
|
||||||
min: "min-content",
|
|
||||||
max: "max-content",
|
|
||||||
fit: "fit-content",
|
|
||||||
screen: "100vw",
|
|
||||||
full: "100%",
|
|
||||||
px: "1px",
|
|
||||||
1: "0.125rem",
|
|
||||||
2: "0.25rem",
|
|
||||||
3: "0.375rem",
|
|
||||||
4: "0.5rem",
|
|
||||||
5: "0.625rem",
|
|
||||||
6: "0.75rem",
|
|
||||||
7: "0.875rem",
|
|
||||||
8: "1rem",
|
|
||||||
9: "1.25rem",
|
|
||||||
10: "1.5rem",
|
|
||||||
11: "1.75rem",
|
|
||||||
12: "2rem",
|
|
||||||
13: "2.25rem",
|
|
||||||
14: "2.5rem",
|
|
||||||
15: "2.75rem",
|
|
||||||
16: "3rem",
|
|
||||||
17: "3.5rem",
|
|
||||||
18: "4rem",
|
|
||||||
20: "5rem",
|
|
||||||
24: "6rem",
|
|
||||||
28: "7rem",
|
|
||||||
32: "8rem",
|
|
||||||
36: "9rem",
|
|
||||||
40: "10rem",
|
|
||||||
44: "11rem",
|
|
||||||
48: "12rem",
|
|
||||||
52: "13rem",
|
|
||||||
56: "14rem",
|
|
||||||
60: "15rem",
|
|
||||||
64: "16rem",
|
|
||||||
72: "18rem",
|
|
||||||
80: "20rem",
|
|
||||||
96: "24rem",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultColors = {
|
|
||||||
// generic colors
|
|
||||||
white: "#ffffff",
|
|
||||||
black: "#000000",
|
|
||||||
|
|
||||||
// brand colors
|
|
||||||
primaryLight: "$blue200",
|
|
||||||
primaryLightHover: "$blue300",
|
|
||||||
primaryLightActive: "$blue400",
|
|
||||||
primaryLightContrast: "$blue600",
|
|
||||||
primary: "$blue600",
|
|
||||||
primaryBorder: "$blue500",
|
|
||||||
primaryBorderHover: "$blue600",
|
|
||||||
primarySolidHover: "$blue700",
|
|
||||||
primarySolidContrast: "$white",
|
|
||||||
primaryShadow: "$blue500",
|
|
||||||
|
|
||||||
secondaryLight: "$purple200",
|
|
||||||
secondaryLightHover: "$purple300",
|
|
||||||
secondaryLightActive: "$purple400",
|
|
||||||
secondaryLightContrast: "$purple600",
|
|
||||||
secondary: "$purple600",
|
|
||||||
secondaryBorder: "$purple500",
|
|
||||||
secondaryBorderHover: "$purple600",
|
|
||||||
secondarySolidHover: "$purple700",
|
|
||||||
secondarySolidContrast: "$white",
|
|
||||||
secondaryShadow: "$purple500",
|
|
||||||
|
|
||||||
successLight: "$green200",
|
|
||||||
successLightHover: "$green300",
|
|
||||||
successLightActive: "$green400",
|
|
||||||
successLightContrast: "$green700",
|
|
||||||
success: "$green600",
|
|
||||||
successBorder: "$green500",
|
|
||||||
successBorderHover: "$green600",
|
|
||||||
successSolidHover: "$green700",
|
|
||||||
successSolidContrast: "$white",
|
|
||||||
successShadow: "$green500",
|
|
||||||
|
|
||||||
warningLight: "$yellow200",
|
|
||||||
warningLightHover: "$yellow300",
|
|
||||||
warningLightActive: "$yellow400",
|
|
||||||
warningLightContrast: "$yellow700",
|
|
||||||
warning: "$yellow600",
|
|
||||||
warningBorder: "$yellow500",
|
|
||||||
warningBorderHover: "$yellow600",
|
|
||||||
warningSolidHover: "$yellow700",
|
|
||||||
warningSolidContrast: "$white",
|
|
||||||
warningShadow: "$yellow500",
|
|
||||||
|
|
||||||
errorLight: "$red200",
|
|
||||||
errorLightHover: "$red300",
|
|
||||||
errorLightActive: "$red400",
|
|
||||||
errorLightContrast: "$red600",
|
|
||||||
error: "$red600",
|
|
||||||
errorBorder: "$red500",
|
|
||||||
errorBorderHover: "$red600",
|
|
||||||
errorSolidHover: "$red700",
|
|
||||||
errorSolidContrast: "$white",
|
|
||||||
errorShadow: "$red500",
|
|
||||||
|
|
||||||
neutralLight: "$gray100",
|
|
||||||
neutralLightHover: "$gray200",
|
|
||||||
neutralLightActive: "$gray300",
|
|
||||||
neutralLightContrast: "$gray800",
|
|
||||||
neutral: "$gray600",
|
|
||||||
neutralBorder: "$gray400",
|
|
||||||
neutralBorderHover: "$gray500",
|
|
||||||
neutralSolidHover: "$gray600",
|
|
||||||
neutralSolidContrast: "$white",
|
|
||||||
neutralShadow: "$gray400",
|
|
||||||
|
|
||||||
gradient: "linear-gradient(112deg, $cyan600 -63.59%, $pink600 -20.3%, $blue600 70.46%)",
|
|
||||||
|
|
||||||
// accents
|
|
||||||
accents0: "$gray50",
|
|
||||||
accents1: "$gray100",
|
|
||||||
accents2: "$gray200",
|
|
||||||
accents3: "$gray300",
|
|
||||||
accents4: "$gray400",
|
|
||||||
accents5: "$gray500",
|
|
||||||
accents6: "$gray600",
|
|
||||||
accents7: "$gray700",
|
|
||||||
accents8: "$gray800",
|
|
||||||
accents9: "$gray900",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultTokens = {
|
|
||||||
fonts: {
|
|
||||||
sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI','Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif;",
|
|
||||||
mono: "Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono','Courier New', monospace;",
|
|
||||||
},
|
|
||||||
fontSizes: {
|
|
||||||
xs: "0.75rem",
|
|
||||||
sm: "0.875rem",
|
|
||||||
base: "1rem",
|
|
||||||
md: "1rem",
|
|
||||||
lg: "1.125rem",
|
|
||||||
xl: "1.25rem",
|
|
||||||
"2xl": "1.5rem",
|
|
||||||
"3xl": "1.875rem",
|
|
||||||
"4xl": "2.25rem",
|
|
||||||
"5xl": "3rem",
|
|
||||||
"6xl": "3.75rem",
|
|
||||||
"7xl": "4.5rem",
|
|
||||||
"8xl": "6rem",
|
|
||||||
"9xl": "8rem",
|
|
||||||
},
|
|
||||||
fontWeights: {
|
|
||||||
hairline: 100,
|
|
||||||
thin: 200,
|
|
||||||
light: 300,
|
|
||||||
normal: 400,
|
|
||||||
medium: 500,
|
|
||||||
semibold: 600,
|
|
||||||
bold: 700,
|
|
||||||
extrabold: 800,
|
|
||||||
black: 900,
|
|
||||||
},
|
|
||||||
lineHeights: {
|
|
||||||
xs: 1,
|
|
||||||
sm: 1.25,
|
|
||||||
base: 1.5,
|
|
||||||
md: 1.5,
|
|
||||||
lg: 1.75,
|
|
||||||
xl: 1.75,
|
|
||||||
"2xl": 2,
|
|
||||||
"3xl": 2.25,
|
|
||||||
"4xl": 2.5,
|
|
||||||
"5xl": 1,
|
|
||||||
"6xl": 1,
|
|
||||||
"7xl": 1,
|
|
||||||
"8xl": 1,
|
|
||||||
"9xl": 1,
|
|
||||||
},
|
|
||||||
letterSpacings: {
|
|
||||||
tighter: "-0.05em",
|
|
||||||
tight: "-0.025em",
|
|
||||||
normal: "0",
|
|
||||||
wide: "0.025em",
|
|
||||||
wider: "0.05em",
|
|
||||||
widest: "0.1em",
|
|
||||||
},
|
|
||||||
space: {
|
|
||||||
...spaces,
|
|
||||||
},
|
|
||||||
sizes: {
|
|
||||||
...spaces,
|
|
||||||
auto: "auto",
|
|
||||||
"1/2": "50%",
|
|
||||||
"1/3": "33.333333%",
|
|
||||||
"2/3": "66.666667%",
|
|
||||||
"1/4": "25%",
|
|
||||||
"2/4": "50%",
|
|
||||||
"3/4": "75%",
|
|
||||||
"1/5": "20%",
|
|
||||||
"2/5": "40%",
|
|
||||||
"3/5": "60%",
|
|
||||||
"4/5": "80%",
|
|
||||||
"1/6": "16.666667%",
|
|
||||||
"2/6": "33.333333%",
|
|
||||||
"3/6": "50%",
|
|
||||||
"4/6": "66.666667%",
|
|
||||||
"5/6": "83.333333%",
|
|
||||||
"1/12": "8.333333%",
|
|
||||||
"2/12": "16.666667%",
|
|
||||||
"3/12": "25%",
|
|
||||||
"4/12": "33.333333%",
|
|
||||||
"5/12": "41.666667%",
|
|
||||||
"6/12": "50%",
|
|
||||||
"7/12": "58.333333%",
|
|
||||||
"8/12": "66.666667%",
|
|
||||||
"9/12": "75%",
|
|
||||||
"10/12": "83.333333%",
|
|
||||||
"11/12": "91.666667%",
|
|
||||||
},
|
|
||||||
radii: {
|
|
||||||
xs: "7px",
|
|
||||||
sm: "9px",
|
|
||||||
md: "12px",
|
|
||||||
base: "14px",
|
|
||||||
lg: "14px",
|
|
||||||
xl: "18px",
|
|
||||||
"2xl": "24px",
|
|
||||||
"3xl": "32px",
|
|
||||||
squared: "33%",
|
|
||||||
rounded: "50%",
|
|
||||||
pill: "9999px",
|
|
||||||
},
|
|
||||||
zIndices: {
|
|
||||||
1: "100",
|
|
||||||
2: "200",
|
|
||||||
3: "300",
|
|
||||||
4: "400",
|
|
||||||
5: "500",
|
|
||||||
10: "1000",
|
|
||||||
max: "9999",
|
|
||||||
},
|
|
||||||
borderWidths: {
|
|
||||||
light: "1px",
|
|
||||||
normal: "2px",
|
|
||||||
bold: "3px",
|
|
||||||
extrabold: "4px",
|
|
||||||
black: "5px",
|
|
||||||
},
|
|
||||||
transitions: {
|
|
||||||
default: "all 250ms ease",
|
|
||||||
button:
|
|
||||||
"background 0.25s ease 0s, color 0.25s ease 0s, border-color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, opacity 0.25s ease 0s",
|
|
||||||
avatar: "box-shadow 0.25s ease 0s, opacity 0.25s ease 0s",
|
|
||||||
card: "transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s",
|
|
||||||
dropdownItem:
|
|
||||||
"background 0.12s ease, transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease 0s",
|
|
||||||
},
|
|
||||||
borderStyles: {
|
|
||||||
solid: "solid",
|
|
||||||
dashed: "dashed",
|
|
||||||
dotted: "dotted",
|
|
||||||
double: "double",
|
|
||||||
groove: "groove",
|
|
||||||
ridge: "ridge",
|
|
||||||
inset: "inset",
|
|
||||||
outset: "outset",
|
|
||||||
hidden: "hidden",
|
|
||||||
none: "none",
|
|
||||||
},
|
|
||||||
colors: defaultColors,
|
|
||||||
shadows: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultMedia = {
|
|
||||||
xs: "(min-width: 650px)",
|
|
||||||
sm: "(min-width: 960px)",
|
|
||||||
md: "(min-width: 1280px)",
|
|
||||||
lg: "(min-width: 1400px)",
|
|
||||||
xl: "(min-width: 1920px)",
|
|
||||||
xsMin: "(min-width: 650px)",
|
|
||||||
smMin: "(min-width: 960px)",
|
|
||||||
mdMin: "(min-width: 1280px)",
|
|
||||||
lgMin: "(min-width: 1400px)",
|
|
||||||
xlMin: "(min-width: 1920px)",
|
|
||||||
xsMax: "(max-width: 650px)",
|
|
||||||
smMax: "(max-width: 960px)",
|
|
||||||
mdMax: "(max-width: 1280px)",
|
|
||||||
lgMax: "(max-width: 1400px)",
|
|
||||||
xlMax: "(max-width: 1920px)",
|
|
||||||
motion: "(prefers-reduced-motion: reduce)",
|
|
||||||
safari: "not all and (min-resolution:.001dpcm)",
|
|
||||||
hover: "(any-hover: hover)",
|
|
||||||
dark: "(prefers-color-scheme: dark)",
|
|
||||||
light: "(prefers-color-scheme: light)",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultUtils = {
|
|
||||||
p: (value: PropertyValue<"padding">) => ({
|
|
||||||
padding: value,
|
|
||||||
}),
|
|
||||||
pt: (value: PropertyValue<"paddingTop">) => ({
|
|
||||||
paddingTop: value,
|
|
||||||
}),
|
|
||||||
pr: (value: PropertyValue<"paddingRight">) => ({
|
|
||||||
paddingRight: value,
|
|
||||||
}),
|
|
||||||
pb: (value: PropertyValue<"paddingBottom">) => ({
|
|
||||||
paddingBottom: value,
|
|
||||||
}),
|
|
||||||
pl: (value: PropertyValue<"paddingLeft">) => ({
|
|
||||||
paddingLeft: value,
|
|
||||||
}),
|
|
||||||
px: (value: PropertyValue<"paddingLeft">) => ({
|
|
||||||
paddingLeft: value,
|
|
||||||
paddingRight: value,
|
|
||||||
}),
|
|
||||||
py: (value: PropertyValue<"paddingTop">) => ({
|
|
||||||
paddingTop: value,
|
|
||||||
paddingBottom: value,
|
|
||||||
}),
|
|
||||||
m: (value: PropertyValue<"margin">) => ({
|
|
||||||
margin: value,
|
|
||||||
}),
|
|
||||||
mt: (value: PropertyValue<"marginTop">) => ({
|
|
||||||
marginTop: value,
|
|
||||||
}),
|
|
||||||
mr: (value: PropertyValue<"marginRight">) => ({
|
|
||||||
marginRight: value,
|
|
||||||
}),
|
|
||||||
mb: (value: PropertyValue<"marginBottom">) => ({
|
|
||||||
marginBottom: value,
|
|
||||||
}),
|
|
||||||
ml: (value: PropertyValue<"marginLeft">) => ({
|
|
||||||
marginLeft: value,
|
|
||||||
}),
|
|
||||||
mx: (value: PropertyValue<"marginLeft">) => ({
|
|
||||||
marginLeft: value,
|
|
||||||
marginRight: value,
|
|
||||||
}),
|
|
||||||
my: (value: PropertyValue<"marginTop">) => ({
|
|
||||||
marginTop: value,
|
|
||||||
marginBottom: value,
|
|
||||||
}),
|
|
||||||
ta: (value: PropertyValue<"textAlign">) => ({
|
|
||||||
textAlign: value,
|
|
||||||
}),
|
|
||||||
tt: (value: PropertyValue<"textTransform">) => ({
|
|
||||||
textTransform: value,
|
|
||||||
}),
|
|
||||||
to: (value: PropertyValue<"textOverflow">) => ({
|
|
||||||
textOverflow: value,
|
|
||||||
}),
|
|
||||||
d: (value: PropertyValue<"display">) => ({display: value}),
|
|
||||||
dflex: (value: PropertyValue<"alignItems">) => ({
|
|
||||||
display: "flex",
|
|
||||||
alignItems: value,
|
|
||||||
justifyContent: value,
|
|
||||||
}),
|
|
||||||
fd: (value: PropertyValue<"flexDirection">) => ({
|
|
||||||
flexDirection: value,
|
|
||||||
}),
|
|
||||||
fw: (value: PropertyValue<"flexWrap">) => ({flexWrap: value}),
|
|
||||||
ai: (value: PropertyValue<"alignItems">) => ({
|
|
||||||
alignItems: value,
|
|
||||||
}),
|
|
||||||
ac: (value: PropertyValue<"alignContent">) => ({
|
|
||||||
alignContent: value,
|
|
||||||
}),
|
|
||||||
jc: (value: PropertyValue<"justifyContent">) => ({
|
|
||||||
justifyContent: value,
|
|
||||||
}),
|
|
||||||
as: (value: PropertyValue<"alignSelf">) => ({
|
|
||||||
alignSelf: value,
|
|
||||||
}),
|
|
||||||
fg: (value: PropertyValue<"flexGrow">) => ({flexGrow: value}),
|
|
||||||
fs: (value: PropertyValue<"fontSize">) => ({
|
|
||||||
fontSize: value,
|
|
||||||
}),
|
|
||||||
fb: (value: PropertyValue<"flexBasis">) => ({
|
|
||||||
flexBasis: value,
|
|
||||||
}),
|
|
||||||
bc: (value: PropertyValue<"backgroundColor">) => ({
|
|
||||||
backgroundColor: value,
|
|
||||||
}),
|
|
||||||
bf: (value: PropertyValue<"backdropFilter">) => ({
|
|
||||||
backdropFilter: value,
|
|
||||||
}),
|
|
||||||
bg: (value: PropertyValue<"backgroundColor">) => ({
|
|
||||||
background: value,
|
|
||||||
}),
|
|
||||||
bgBlur: (value: PropertyValue<"backgroundColor">) => ({
|
|
||||||
bf: "saturate(180%) blur(10px)",
|
|
||||||
bg: value,
|
|
||||||
}),
|
|
||||||
bgColor: (value: PropertyValue<"backgroundColor">) => ({
|
|
||||||
backgroundColor: value,
|
|
||||||
}),
|
|
||||||
backgroundClip: (value: PropertyValue<"backgroundClip">) => ({
|
|
||||||
WebkitBackgroundClip: value,
|
|
||||||
backgroundClip: value,
|
|
||||||
}),
|
|
||||||
bgClip: (value: PropertyValue<"backgroundClip">) => ({
|
|
||||||
WebkitBackgroundClip: value,
|
|
||||||
backgroundClip: value,
|
|
||||||
}),
|
|
||||||
br: (value: PropertyValue<"borderRadius">) => ({
|
|
||||||
borderRadius: value,
|
|
||||||
}),
|
|
||||||
bw: (value: PropertyValue<"borderWidth">) => ({
|
|
||||||
borderWidth: value,
|
|
||||||
}),
|
|
||||||
btrr: (value: PropertyValue<"borderTopRightRadius">) => ({
|
|
||||||
borderTopRightRadius: value,
|
|
||||||
}),
|
|
||||||
bbrr: (value: PropertyValue<"borderBottomRightRadius">) => ({
|
|
||||||
borderBottomRightRadius: value,
|
|
||||||
}),
|
|
||||||
bblr: (value: PropertyValue<"borderBottomLeftRadius">) => ({
|
|
||||||
borderBottomLeftRadius: value,
|
|
||||||
}),
|
|
||||||
btlr: (value: PropertyValue<"borderTopLeftRadius">) => ({
|
|
||||||
borderTopLeftRadius: value,
|
|
||||||
}),
|
|
||||||
bs: (value: PropertyValue<"boxShadow">) => ({
|
|
||||||
boxShadow: value,
|
|
||||||
}),
|
|
||||||
ds: (value: PropertyValue<"boxShadow">) => ({
|
|
||||||
dropShadow: value,
|
|
||||||
}),
|
|
||||||
shadow: (value: PropertyValue<"boxShadow">) => ({
|
|
||||||
boxShadow: value,
|
|
||||||
}),
|
|
||||||
dshadow: (value: PropertyValue<"boxShadow">) => ({
|
|
||||||
dropShadow: value,
|
|
||||||
}),
|
|
||||||
dropShadow: (value: PropertyValue<"boxShadow">) => ({
|
|
||||||
filter: `$dropShadows${value}`,
|
|
||||||
}),
|
|
||||||
normalShadow: (value: PropertyValue<"backgroundColor">) => ({
|
|
||||||
boxShadow: `0 4px 14px 0 $colors${value}`,
|
|
||||||
}),
|
|
||||||
normalShadowVar: (value: PropertyValue<"backgroundColor">) => ({
|
|
||||||
boxShadow: `0 4px 14px 0 ${value}`,
|
|
||||||
}),
|
|
||||||
lh: (value: PropertyValue<"lineHeight">) => ({
|
|
||||||
lineHeight: value,
|
|
||||||
}),
|
|
||||||
ov: (value: PropertyValue<"overflow">) => ({overflow: value}),
|
|
||||||
ox: (value: PropertyValue<"overflowX">) => ({
|
|
||||||
overflowX: value,
|
|
||||||
}),
|
|
||||||
oy: (value: PropertyValue<"overflowY">) => ({
|
|
||||||
overflowY: value,
|
|
||||||
}),
|
|
||||||
pe: (value: PropertyValue<"pointerEvents">) => ({
|
|
||||||
pointerEvents: value,
|
|
||||||
}),
|
|
||||||
events: (value: PropertyValue<"pointerEvents">) => ({
|
|
||||||
pointerEvents: value,
|
|
||||||
}),
|
|
||||||
us: (value: PropertyValue<"userSelect">) => ({
|
|
||||||
WebkitUserSelect: value,
|
|
||||||
userSelect: value,
|
|
||||||
}),
|
|
||||||
userSelect: (value: PropertyValue<"userSelect">) => ({
|
|
||||||
WebkitUserSelect: value,
|
|
||||||
userSelect: value,
|
|
||||||
}),
|
|
||||||
w: (value: PropertyValue<"width">) => ({width: value}),
|
|
||||||
h: (value: PropertyValue<"height">) => ({height: value}),
|
|
||||||
mw: (value: PropertyValue<"maxWidth">) => ({maxWidth: value}),
|
|
||||||
maxW: (value: PropertyValue<"maxWidth">) => ({
|
|
||||||
maxWidth: value,
|
|
||||||
}),
|
|
||||||
mh: (value: PropertyValue<"maxHeight">) => ({
|
|
||||||
maxHeight: value,
|
|
||||||
}),
|
|
||||||
maxH: (value: PropertyValue<"maxHeight">) => ({
|
|
||||||
maxHeight: value,
|
|
||||||
}),
|
|
||||||
size: (value: PropertyValue<"width">) => ({
|
|
||||||
width: value,
|
|
||||||
height: value,
|
|
||||||
}),
|
|
||||||
minSize: (value: PropertyValue<"width">) => ({
|
|
||||||
minWidth: value,
|
|
||||||
minHeight: value,
|
|
||||||
width: value,
|
|
||||||
height: value,
|
|
||||||
}),
|
|
||||||
sizeMin: (value: PropertyValue<"width">) => ({
|
|
||||||
minWidth: value,
|
|
||||||
minHeight: value,
|
|
||||||
width: value,
|
|
||||||
height: value,
|
|
||||||
}),
|
|
||||||
maxSize: (value: PropertyValue<"width">) => ({
|
|
||||||
maxWidth: value,
|
|
||||||
maxHeight: value,
|
|
||||||
}),
|
|
||||||
sizeMax: (value: PropertyValue<"width">) => ({
|
|
||||||
maxWidth: value,
|
|
||||||
maxHeight: value,
|
|
||||||
}),
|
|
||||||
appearance: (value: PropertyValue<"appearance">) => ({
|
|
||||||
WebkitAppearance: value,
|
|
||||||
appearance: value,
|
|
||||||
}),
|
|
||||||
scale: (value: PropertyValue<"scale">) => ({
|
|
||||||
transform: `scale(${value})`,
|
|
||||||
}),
|
|
||||||
linearGradient: (value: PropertyValue<"backgroundImage">) => ({
|
|
||||||
backgroundImage: `linear-gradient(${value})`,
|
|
||||||
}),
|
|
||||||
tdl: (value: PropertyValue<"textDecorationLine">) => ({
|
|
||||||
textDecorationLine: value,
|
|
||||||
}),
|
|
||||||
truncateText: (value: PropertyValue<"width">) => ({
|
|
||||||
maxWidth: value,
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
overflow: "hidden",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
}),
|
|
||||||
textGradient: (value: PropertyValue<"backgroundImage">) => ({
|
|
||||||
backgroundImage: `linear-gradient(${value})`,
|
|
||||||
WebkitBackgroundClip: "text",
|
|
||||||
WebkitTextFillColor: "transparent",
|
|
||||||
"&::selection": {
|
|
||||||
WebkitTextFillColor: "$colors$text",
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultThemeMap = {
|
|
||||||
...defaultStitchesThemeMap,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
prefix: "nextui",
|
|
||||||
theme: {
|
|
||||||
...defaultTokens,
|
|
||||||
shadows: {},
|
|
||||||
dropShadows: {},
|
|
||||||
},
|
|
||||||
media: defaultMedia,
|
|
||||||
utils: defaultUtils,
|
|
||||||
themeMap: defaultThemeMap,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Common theme types
|
|
||||||
*/
|
|
||||||
|
|
||||||
// defaultTokens
|
|
||||||
export type Fonts = typeof defaultTokens.fonts;
|
|
||||||
export type FontSizes = typeof defaultTokens.fontSizes;
|
|
||||||
export type FontWeights = typeof defaultTokens.fontWeights;
|
|
||||||
export type LineHeights = typeof defaultTokens.lineHeights;
|
|
||||||
export type LetterSpacings = typeof defaultTokens.letterSpacings;
|
|
||||||
export type Space = typeof defaultTokens.space;
|
|
||||||
export type Sizes = typeof defaultTokens.sizes;
|
|
||||||
export type Radii = typeof defaultTokens.radii;
|
|
||||||
export type ZIndices = typeof defaultTokens.zIndices;
|
|
||||||
export type BorderStyles = typeof defaultTokens.borderStyles;
|
|
||||||
export type BorderWidths = typeof defaultTokens.borderWidths;
|
|
||||||
export type Shadows = typeof defaultTokens.shadows;
|
|
||||||
export type Transitions = typeof defaultTokens.transitions;
|
|
||||||
export type Colors = typeof defaultColors;
|
|
||||||
|
|
||||||
export type TokensGroup = {
|
|
||||||
fonts: Fonts;
|
|
||||||
fontSizes: FontSizes;
|
|
||||||
fontWeights: FontWeights;
|
|
||||||
lineHeights: LineHeights;
|
|
||||||
letterSpacings: LetterSpacings;
|
|
||||||
space: Space;
|
|
||||||
sizes: Sizes;
|
|
||||||
radii: Radii;
|
|
||||||
zIndices: ZIndices;
|
|
||||||
borderWidths: BorderWidths;
|
|
||||||
transitions: Transitions;
|
|
||||||
colors: Colors;
|
|
||||||
borderStyles: BorderStyles;
|
|
||||||
shadows: Shadows;
|
|
||||||
};
|
|
||||||
|
|
||||||
// defaultMedia
|
|
||||||
export type Media = typeof defaultMedia;
|
|
||||||
|
|
||||||
// defaultUtils
|
|
||||||
export type Utils = typeof defaultUtils;
|
|
||||||
|
|
||||||
// defaultThemeMap
|
|
||||||
export type ThemeMap = typeof defaultThemeMap;
|
|
||||||
@ -1,257 +0,0 @@
|
|||||||
import React, {ReactNode} from "react";
|
|
||||||
|
|
||||||
import {globalCss, getCssText} from "./stitches.config";
|
|
||||||
|
|
||||||
const globalStyles = globalCss({
|
|
||||||
"*, *:before, *:after": {
|
|
||||||
boxSizing: "border-box",
|
|
||||||
textRendering: "geometricPrecision",
|
|
||||||
WebkitTapHighlightColor: "transparent",
|
|
||||||
},
|
|
||||||
html: {
|
|
||||||
fontSize: "$base",
|
|
||||||
},
|
|
||||||
body: {
|
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
minHeight: "100%",
|
|
||||||
position: "relative",
|
|
||||||
overflowX: "hidden",
|
|
||||||
WebkitFontSmoothing: "antialiased",
|
|
||||||
MozOsxFontSmoothing: "grayscale",
|
|
||||||
textRendering: "optimizeLegibility",
|
|
||||||
fontSize: "$base",
|
|
||||||
lineHeight: "$md",
|
|
||||||
fontFamily: "$sans",
|
|
||||||
},
|
|
||||||
"html, body": {
|
|
||||||
backgroundColor: "$background",
|
|
||||||
color: "$text",
|
|
||||||
},
|
|
||||||
"p, small": {
|
|
||||||
color: "inherit",
|
|
||||||
letterSpacing: "$tighter",
|
|
||||||
fontWeight: "$normal",
|
|
||||||
fontFamily: "$sans",
|
|
||||||
},
|
|
||||||
p: {
|
|
||||||
fontSize: "$base",
|
|
||||||
lineHeight: "$lg",
|
|
||||||
},
|
|
||||||
small: {
|
|
||||||
margin: 0,
|
|
||||||
lineHeight: "$xs",
|
|
||||||
fontSize: "$xs",
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
fontWeight: "$semibold",
|
|
||||||
},
|
|
||||||
span: {
|
|
||||||
fontSize: "inherit",
|
|
||||||
color: "inherit",
|
|
||||||
fontWeight: "inherit",
|
|
||||||
},
|
|
||||||
img: {
|
|
||||||
maxWidth: "100%",
|
|
||||||
},
|
|
||||||
a: {
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "inherit",
|
|
||||||
WebkitTouchCallout: "none",
|
|
||||||
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
|
|
||||||
WebkitBoxAlign: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
color: "$link",
|
|
||||||
textDecoration: "none",
|
|
||||||
},
|
|
||||||
"a:hover": {
|
|
||||||
textDecoration: "none",
|
|
||||||
},
|
|
||||||
"ul,ol": {
|
|
||||||
padding: 0,
|
|
||||||
listStyleType: "none",
|
|
||||||
margin: "$sm $sm $sm $lg",
|
|
||||||
color: "$foreground",
|
|
||||||
},
|
|
||||||
ol: {
|
|
||||||
listStyleType: "decimal",
|
|
||||||
},
|
|
||||||
li: {
|
|
||||||
marginBottom: "$5",
|
|
||||||
fontSize: "$base",
|
|
||||||
lineHeight: "$lg",
|
|
||||||
},
|
|
||||||
"h1,h2,h3,h4,h5,h6": {
|
|
||||||
color: "inherit",
|
|
||||||
margin: "0 0 $5 0",
|
|
||||||
},
|
|
||||||
h1: {
|
|
||||||
letterSpacing: "$tighter",
|
|
||||||
fontSize: "$5xl",
|
|
||||||
lineHeight: "$md",
|
|
||||||
fontWeight: "$bold",
|
|
||||||
},
|
|
||||||
h2: {
|
|
||||||
letterSpacing: "$tighter",
|
|
||||||
fontSize: "$4xl",
|
|
||||||
fontWeight: "$semibold",
|
|
||||||
},
|
|
||||||
h3: {
|
|
||||||
letterSpacing: "$tighter",
|
|
||||||
fontSize: "$2xl",
|
|
||||||
fontWeight: "$semibold",
|
|
||||||
},
|
|
||||||
h4: {
|
|
||||||
letterSpacing: "$tighter",
|
|
||||||
fontSize: "$xl",
|
|
||||||
fontWeight: "$semibold",
|
|
||||||
},
|
|
||||||
h5: {
|
|
||||||
letterSpacing: "$tight",
|
|
||||||
fontSize: "$md",
|
|
||||||
fontWeight: "$semibold",
|
|
||||||
},
|
|
||||||
h6: {
|
|
||||||
letterSpacing: "$tight",
|
|
||||||
fontSize: "$sm",
|
|
||||||
fontWeight: "$semibold",
|
|
||||||
},
|
|
||||||
"button, input, select,textarea": {
|
|
||||||
fontFamily: "inherit",
|
|
||||||
fontSize: "inherit",
|
|
||||||
lineHeight: "inherit",
|
|
||||||
color: "inherit",
|
|
||||||
margin: 0,
|
|
||||||
},
|
|
||||||
"button:focus, input:focus, select:focus, textarea:focus": {
|
|
||||||
outline: "none",
|
|
||||||
},
|
|
||||||
code: {
|
|
||||||
color: "$code",
|
|
||||||
padding: "$1 $2",
|
|
||||||
borderRadius: "$xs",
|
|
||||||
bg: "$codeLight",
|
|
||||||
fontFamily: "$mono",
|
|
||||||
fontSize: "$sm",
|
|
||||||
whiteSpace: "pre-wrap",
|
|
||||||
transition: "opacity 0.25s ease 0s",
|
|
||||||
},
|
|
||||||
"code:hover": {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
pre: {
|
|
||||||
overflow: "auto",
|
|
||||||
whiteSpace: "pre",
|
|
||||||
textAlign: "left",
|
|
||||||
fontSize: "$sm",
|
|
||||||
borderRadius: "$lg",
|
|
||||||
padding: "$md $lg",
|
|
||||||
margin: "$lg 0",
|
|
||||||
fontFamily: "$mono",
|
|
||||||
lineHeight: "$md",
|
|
||||||
webkitOverflowScrolling: "touch",
|
|
||||||
},
|
|
||||||
"pre code": {
|
|
||||||
color: "$foreground",
|
|
||||||
fontSize: "$sm",
|
|
||||||
lineHeight: "$sm",
|
|
||||||
whiteSpace: "pre",
|
|
||||||
},
|
|
||||||
"pre code:before,pre code:after": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"pre p": {
|
|
||||||
margin: 0,
|
|
||||||
},
|
|
||||||
"pre::-webkit-scrollbar": {
|
|
||||||
display: "none",
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
background: "transparent",
|
|
||||||
},
|
|
||||||
hr: {
|
|
||||||
background: "$border",
|
|
||||||
borderColor: "transparent",
|
|
||||||
borderWidth: "0px",
|
|
||||||
borderStyle: "none",
|
|
||||||
height: "1px",
|
|
||||||
},
|
|
||||||
details: {
|
|
||||||
backgroundColor: "$accents1",
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
"details:focus, details:hover, details:active": {
|
|
||||||
outline: "none",
|
|
||||||
},
|
|
||||||
summary: {
|
|
||||||
cursor: "pointer",
|
|
||||||
userSelect: "none",
|
|
||||||
listStyle: "none",
|
|
||||||
outline: "none",
|
|
||||||
},
|
|
||||||
"summary::-webkit-details-marker, summary::before": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"summary::-moz-list-bullet": {
|
|
||||||
fontSize: 0,
|
|
||||||
},
|
|
||||||
"summary:focus, summary:hover, summary:active": {
|
|
||||||
outline: "none",
|
|
||||||
listStyle: "none",
|
|
||||||
},
|
|
||||||
"::selection": {
|
|
||||||
backgroundColor: "$selection",
|
|
||||||
},
|
|
||||||
blockquote: {
|
|
||||||
padding: "$md $lg",
|
|
||||||
color: "$accents7",
|
|
||||||
backgroundColor: "$accents0",
|
|
||||||
borderRadius: "$lg",
|
|
||||||
margin: "$10 0",
|
|
||||||
},
|
|
||||||
"blockquote *:first-child": {
|
|
||||||
marginTop: 0,
|
|
||||||
},
|
|
||||||
"blockquote *:last-child": {
|
|
||||||
marginBottom: 0,
|
|
||||||
},
|
|
||||||
kbd: {
|
|
||||||
width: "fit-content",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "inline-block",
|
|
||||||
color: "$accents8",
|
|
||||||
bg: "$accents0",
|
|
||||||
border: "1px solid $border",
|
|
||||||
boxShadow: "0 0 1px 0 rgb(0 0 0 / 14%)",
|
|
||||||
fontFamily: "$sans",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "$1 $3",
|
|
||||||
mx: "$1",
|
|
||||||
lineHeight: "$sm",
|
|
||||||
fontSize: "$sm",
|
|
||||||
},
|
|
||||||
"kbd + kbd": {
|
|
||||||
ml: "$2",
|
|
||||||
},
|
|
||||||
"dl, dd, hr, figure, p": {
|
|
||||||
margin: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const flushCSS = () => <style dangerouslySetInnerHTML={{__html: getCssText()}} id="stitches" />;
|
|
||||||
|
|
||||||
const CssBaselineBase: React.FC<{children?: ReactNode}> = ({children}) => {
|
|
||||||
globalStyles();
|
|
||||||
|
|
||||||
return <React.Fragment>{children}</React.Fragment>;
|
|
||||||
};
|
|
||||||
|
|
||||||
type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
|
|
||||||
flush: typeof flushCSS;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const CssBaseline = React.memo(CssBaselineBase) as MemoCssBaselineComponent<{
|
|
||||||
children?: ReactNode;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
CssBaseline.flush = flushCSS;
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
import {
|
|
||||||
blueDark,
|
|
||||||
greenDark,
|
|
||||||
purpleDark,
|
|
||||||
yellowDark,
|
|
||||||
redDark,
|
|
||||||
cyanDark,
|
|
||||||
pinkDark,
|
|
||||||
grayDark,
|
|
||||||
} from "./colors";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
colors: {
|
|
||||||
// background
|
|
||||||
background: "$black",
|
|
||||||
backgroundAlpha: "rgba(0, 0, 0, 0.6)",
|
|
||||||
foreground: "$white",
|
|
||||||
backgroundContrast: "$accents0",
|
|
||||||
|
|
||||||
//semantic colors
|
|
||||||
...blueDark,
|
|
||||||
...purpleDark,
|
|
||||||
...greenDark,
|
|
||||||
...yellowDark,
|
|
||||||
...redDark,
|
|
||||||
...cyanDark,
|
|
||||||
...pinkDark,
|
|
||||||
...grayDark,
|
|
||||||
|
|
||||||
// brand colors
|
|
||||||
primaryLight: "$blue50",
|
|
||||||
primaryLightHover: "$blue100",
|
|
||||||
primaryLightActive: "$blue200",
|
|
||||||
primaryLightContrast: "$blue600",
|
|
||||||
|
|
||||||
secondaryLight: "$purple50",
|
|
||||||
secondaryLightHover: "$purple100",
|
|
||||||
secondaryLightActive: "$purple200",
|
|
||||||
secondaryLightContrast: "$purple800",
|
|
||||||
secondary: "$purple700",
|
|
||||||
secondaryBorder: "$purple500",
|
|
||||||
secondaryBorderHover: "$purple600",
|
|
||||||
secondarySolidHover: "$purple700",
|
|
||||||
secondaryShadow: "$purple500",
|
|
||||||
|
|
||||||
successLight: "$green50",
|
|
||||||
successLightHover: "$green100",
|
|
||||||
successLightActive: "$green200",
|
|
||||||
|
|
||||||
warningLight: "$yellow50",
|
|
||||||
warningLightHover: "$yellow100",
|
|
||||||
warningLightActive: "$yellow200",
|
|
||||||
|
|
||||||
errorLight: "$red50",
|
|
||||||
errorLightHover: "$red100",
|
|
||||||
errorLightActive: "$red200",
|
|
||||||
errorLightContrast: "$red700",
|
|
||||||
|
|
||||||
neutralLight: "$gray200",
|
|
||||||
neutralLightHover: "$gray300",
|
|
||||||
neutralLightActive: "$gray400",
|
|
||||||
neutralSolidContrast: "$white",
|
|
||||||
|
|
||||||
// misc
|
|
||||||
text: "$gray900",
|
|
||||||
link: "$blue700",
|
|
||||||
codeLight: "$cyan50",
|
|
||||||
code: "$cyan600",
|
|
||||||
selection: "$pink800",
|
|
||||||
border: "rgba(255, 255, 255, 0.15)",
|
|
||||||
},
|
|
||||||
shadows: {
|
|
||||||
xs: "0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)",
|
|
||||||
sm: "0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)",
|
|
||||||
md: "0 12px 20px 6px rgb(0 0 0 / 0.08)",
|
|
||||||
lg: "0 12px 34px 6px rgb(0 0 0 / 0.18)",
|
|
||||||
xl: "0 25px 65px 0px rgb(0 0 0 / 0.35)",
|
|
||||||
},
|
|
||||||
dropShadows: {
|
|
||||||
xs: "drop-shadow(0 2px 4px rgb(0 0 0 / 0.07)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.04))",
|
|
||||||
sm: "drop-shadow(0 2px 8px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04))",
|
|
||||||
md: "drop-shadow(0 4px 12px rgb(0 0 0 / 0.08)) drop-shadow(0 20px 8px rgb(0 0 0 / 0.04))",
|
|
||||||
lg: "drop-shadow(0 12px 24px rgb(0 0 0 / 0.15)) drop-shadow(0 12px 14px rgb(0 0 0 / 0.1))",
|
|
||||||
xl: "drop-shadow(0 25px 34px rgb(0 0 0 / 0.35))",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,10 +1,2 @@
|
|||||||
export * from "./root";
|
|
||||||
export * from "./system";
|
export * from "./system";
|
||||||
export * from "./colors";
|
|
||||||
export * from "./utils";
|
|
||||||
export * from "./css-baseline";
|
|
||||||
export * from "./theme-provider";
|
export * from "./theme-provider";
|
||||||
export * from "./stitches.config";
|
|
||||||
export * from "./use-theme";
|
|
||||||
export * from "./types";
|
|
||||||
export * from "./variants";
|
|
||||||
|
|||||||
@ -1,43 +0,0 @@
|
|||||||
import {blue, purple, green, yellow, red, cyan, pink, gray} from "./colors";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
colors: {
|
|
||||||
// background colors
|
|
||||||
background: "$white",
|
|
||||||
backgroundAlpha: "rgba(255, 255, 255, 0.8)",
|
|
||||||
foreground: "$black",
|
|
||||||
backgroundContrast: "$white",
|
|
||||||
|
|
||||||
//semantic colors
|
|
||||||
...blue,
|
|
||||||
...purple,
|
|
||||||
...green,
|
|
||||||
...yellow,
|
|
||||||
...red,
|
|
||||||
...cyan,
|
|
||||||
...pink,
|
|
||||||
...gray,
|
|
||||||
|
|
||||||
// misc
|
|
||||||
text: "$gray900",
|
|
||||||
link: "$blue600",
|
|
||||||
codeLight: "$pink100",
|
|
||||||
code: "$pink600",
|
|
||||||
selection: "$blue200",
|
|
||||||
border: "rgba(0, 0, 0, 0.15)",
|
|
||||||
},
|
|
||||||
shadows: {
|
|
||||||
xs: "0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)",
|
|
||||||
sm: "0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)",
|
|
||||||
md: "0 12px 20px 6px rgb(104 112 118 / 0.08)",
|
|
||||||
lg: "0 12px 34px 6px rgb(104 112 118 / 0.18)",
|
|
||||||
xl: "0 25px 65px 0px rgb(104 112 118 / 0.35)",
|
|
||||||
},
|
|
||||||
dropShadows: {
|
|
||||||
xs: "drop-shadow(0 2px 4px rgb(104 112 118 / 0.07)) drop-shadow(0 1px 1px rgb(104 112 118 / 0.04))",
|
|
||||||
sm: "drop-shadow(0 2px 8px rgb(104 112 118 / 0.07)) drop-shadow(0 2px 4px rgb(104 112 118 / 0.04))",
|
|
||||||
md: "drop-shadow(0 4px 12px rgb(104 112 118 / 0.08)) drop-shadow(0 20px 8px rgb(104 112 118 / 0.04))",
|
|
||||||
lg: "drop-shadow(0 12px 24px rgb(104 112 118 / 0.15)) drop-shadow(0 12px 14px rgb(104 112 118 / 0.1))",
|
|
||||||
xl: "drop-shadow(0 25px 34px rgb(104 112 118 / 0.35))",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
/**
|
|
||||||
* Part of this code is taken from @chakra-ui/system 🙏🏻
|
|
||||||
*/
|
|
||||||
import {
|
|
||||||
As,
|
|
||||||
rootStyled,
|
|
||||||
DOMElements,
|
|
||||||
CapitalizedDOMElements,
|
|
||||||
NextUIComponent,
|
|
||||||
HTMLNextUIComponents,
|
|
||||||
} from "./system";
|
|
||||||
|
|
||||||
type NextUIRoot = {
|
|
||||||
<T extends As, P = {}>(component: T): NextUIComponent<T, P>;
|
|
||||||
};
|
|
||||||
|
|
||||||
function root() {
|
|
||||||
const cache = new Map<DOMElements, NextUIComponent<DOMElements>>();
|
|
||||||
|
|
||||||
return new Proxy(rootStyled, {
|
|
||||||
/**
|
|
||||||
* @example
|
|
||||||
* const Div = NextUI("div")
|
|
||||||
* const StyledComponent = NextUI(AnotherComponent)
|
|
||||||
*/
|
|
||||||
apply(target, thisArg, argArray: [DOMElements]) {
|
|
||||||
return rootStyled(...argArray);
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @example
|
|
||||||
* <NextUI.Div />
|
|
||||||
*/
|
|
||||||
get(_, element: CapitalizedDOMElements) {
|
|
||||||
const key = element.toLowerCase() as DOMElements;
|
|
||||||
|
|
||||||
if (!cache.has(key)) {
|
|
||||||
cache.set(key, rootStyled(key));
|
|
||||||
}
|
|
||||||
|
|
||||||
return cache.get(key);
|
|
||||||
},
|
|
||||||
}) as NextUIRoot & HTMLNextUIComponents;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* The NextUI root serves as an object of stitches styled components enabled JSX elements,
|
|
||||||
* and also a function that can be used to enable custom component receive nextui's props.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
export const NextUI = root();
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import {createStitches} from "@stitches/react";
|
|
||||||
import {deepMerge} from "@nextui-org/shared-utils";
|
|
||||||
|
|
||||||
import commonTheme from "./common";
|
|
||||||
import lightTheme from "./light-theme";
|
|
||||||
import darkTheme from "./dark-theme";
|
|
||||||
import {Theme, BaseTheme, ConfigType} from "./types";
|
|
||||||
|
|
||||||
export const getStitchesTheme = (targetTheme: BaseTheme): BaseTheme => {
|
|
||||||
return deepMerge(targetTheme, commonTheme.theme);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const {
|
|
||||||
styled,
|
|
||||||
css,
|
|
||||||
globalCss,
|
|
||||||
keyframes,
|
|
||||||
getCssText,
|
|
||||||
theme,
|
|
||||||
config,
|
|
||||||
createTheme: createThemeBase,
|
|
||||||
} = createStitches({
|
|
||||||
...commonTheme,
|
|
||||||
theme: {
|
|
||||||
...commonTheme.theme,
|
|
||||||
shadows: {
|
|
||||||
...lightTheme.shadows,
|
|
||||||
},
|
|
||||||
dropShadows: {
|
|
||||||
...lightTheme.dropShadows,
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
...commonTheme.theme.colors,
|
|
||||||
...lightTheme.colors,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Mutators
|
|
||||||
* @internal
|
|
||||||
*/
|
|
||||||
function setMedia<Media extends {} = {}>(media: ConfigType.Media<Media>): void {
|
|
||||||
config.media = {
|
|
||||||
...config.media,
|
|
||||||
...media,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function setUtils<Utils extends {} = {}>(utils: ConfigType.Utils<Utils>): void {
|
|
||||||
config.utils = {
|
|
||||||
...config.utils,
|
|
||||||
...utils,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function setThemeMap<ThemeMap extends {} = {}>(themeMap: ConfigType.ThemeMap<ThemeMap>): void {
|
|
||||||
config.themeMap = {
|
|
||||||
...config.themeMap,
|
|
||||||
...themeMap,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const createTheme = ({
|
|
||||||
type,
|
|
||||||
className,
|
|
||||||
theme = {},
|
|
||||||
media = {},
|
|
||||||
utils = {},
|
|
||||||
themeMap = {},
|
|
||||||
}: Theme) => {
|
|
||||||
if (!type) {
|
|
||||||
throw new Error("Theme type is required");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Object.keys(media).length > 0) {
|
|
||||||
setMedia(media);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Object.keys(utils).length > 0) {
|
|
||||||
setUtils(utils);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Object.keys(themeMap).length > 0) {
|
|
||||||
setThemeMap(themeMap);
|
|
||||||
}
|
|
||||||
|
|
||||||
return createThemeBase(
|
|
||||||
className || `${type}-theme`,
|
|
||||||
deepMerge(type === "dark" ? darkTheme : lightTheme, theme),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -4,9 +4,6 @@
|
|||||||
|
|
||||||
import {forwardRef as baseForwardRef} from "react";
|
import {forwardRef as baseForwardRef} from "react";
|
||||||
|
|
||||||
import {styled} from "./stitches.config";
|
|
||||||
import {CSS} from "./types";
|
|
||||||
|
|
||||||
export type As<Props = any> = React.ElementType<Props>;
|
export type As<Props = any> = React.ElementType<Props>;
|
||||||
export type DOMElements = keyof JSX.IntrinsicElements;
|
export type DOMElements = keyof JSX.IntrinsicElements;
|
||||||
export type CapitalizedDOMElements = Capitalize<DOMElements>;
|
export type CapitalizedDOMElements = Capitalize<DOMElements>;
|
||||||
@ -18,8 +15,9 @@ export interface NextUIProps {
|
|||||||
as?: As;
|
as?: As;
|
||||||
/**
|
/**
|
||||||
* The stiches's css style object
|
* The stiches's css style object
|
||||||
|
* TODO: remove this prop after migrating all components to TailwindCSS
|
||||||
*/
|
*/
|
||||||
css?: CSS;
|
css?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<
|
export type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<
|
||||||
@ -95,12 +93,6 @@ export type HTMLNextUIComponents = {
|
|||||||
[Tag in CapitalizedDOMElements]: NextUIComponent<Uncapitalize<Tag>, {}>;
|
[Tag in CapitalizedDOMElements]: NextUIComponent<Uncapitalize<Tag>, {}>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function rootStyled<T extends As, P = {}>(component: T) {
|
|
||||||
const Component = styled(component as React.ComponentType<any>, {});
|
|
||||||
|
|
||||||
return Component as NextUIComponent<T, P>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const toIterator = (obj: any) => {
|
export const toIterator = (obj: any) => {
|
||||||
return {
|
return {
|
||||||
...obj,
|
...obj,
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import {theme} from "./stitches.config";
|
|
||||||
import {NextUIThemeContext} from "./types";
|
|
||||||
|
|
||||||
export const defaultContext: NextUIThemeContext = {
|
|
||||||
isDark: false,
|
|
||||||
theme,
|
|
||||||
type: "light",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ThemeContext: React.Context<NextUIThemeContext> =
|
|
||||||
React.createContext<NextUIThemeContext>(defaultContext);
|
|
||||||
@ -1,96 +1,10 @@
|
|||||||
import React, {useState, useMemo, useEffect, ReactNode} from "react";
|
import React, {ReactNode} from "react";
|
||||||
import {SSRProvider} from "@react-aria/ssr";
|
import {SSRProvider} from "@react-aria/ssr";
|
||||||
import {OverlayProvider} from "@react-aria/overlays";
|
|
||||||
import {deepMerge, copyObject} from "@nextui-org/shared-utils";
|
|
||||||
import {useSSR} from "@nextui-org/use-ssr";
|
|
||||||
|
|
||||||
import {changeTheme, getThemeName, getDocumentCSSTokens, getDocumentTheme} from "./utils";
|
|
||||||
import {CreateTheme, NextUITheme, NextUIThemeContext, ThemeType} from "./types";
|
|
||||||
import {ThemeContext, defaultContext} from "./theme-context";
|
|
||||||
import {CssBaseline} from "./css-baseline";
|
|
||||||
|
|
||||||
export interface NextUIProviderProps {
|
export interface NextUIProviderProps {
|
||||||
theme?: CreateTheme;
|
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
disableBaseline?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const NextUIProvider: React.FC<NextUIProviderProps> = ({
|
export const NextUIProvider: React.FC<NextUIProviderProps> = ({children}) => {
|
||||||
theme: userTheme,
|
return <SSRProvider>{children}</SSRProvider>;
|
||||||
disableBaseline = false,
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const {isBrowser} = useSSR();
|
|
||||||
|
|
||||||
const [currentTheme, setCurrentTheme] = useState<ThemeType | string>(defaultContext.type);
|
|
||||||
|
|
||||||
const changeCurrentTheme = (type: ThemeType | string) => {
|
|
||||||
setCurrentTheme((ct) => (ct !== type ? type : ct));
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeTypeBaseEl = (el: HTMLElement) => {
|
|
||||||
const themeValue = getDocumentTheme(el);
|
|
||||||
|
|
||||||
themeValue && changeCurrentTheme(themeValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const providerValue = useMemo<NextUIThemeContext>(() => {
|
|
||||||
const themeTokens = isBrowser ? getDocumentCSSTokens() : {};
|
|
||||||
const theme = deepMerge(copyObject(defaultContext.theme), themeTokens) as NextUITheme;
|
|
||||||
const themeName = getThemeName(currentTheme);
|
|
||||||
|
|
||||||
return {
|
|
||||||
theme,
|
|
||||||
type: themeName,
|
|
||||||
isDark: themeName === "dark",
|
|
||||||
};
|
|
||||||
}, [currentTheme, isBrowser]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// initial set
|
|
||||||
changeTypeBaseEl(document?.documentElement);
|
|
||||||
|
|
||||||
const observer = new MutationObserver((mutation) => {
|
|
||||||
if (mutation && mutation.length > 0 && mutation[0]?.target.nodeName === "BODY") {
|
|
||||||
const documentTheme = document?.body?.dataset?.theme;
|
|
||||||
|
|
||||||
documentTheme && changeCurrentTheme(documentTheme);
|
|
||||||
} else {
|
|
||||||
changeTypeBaseEl(document?.documentElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document?.documentElement, {
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ["data-theme", "style"],
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document?.body, {
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ["data-theme", "style"],
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isBrowser || !userTheme) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (userTheme?.className) {
|
|
||||||
changeTheme(userTheme.className);
|
|
||||||
changeCurrentTheme(getThemeName(userTheme.className));
|
|
||||||
}
|
|
||||||
}, [isBrowser, userTheme]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SSRProvider>
|
|
||||||
<OverlayProvider>
|
|
||||||
<ThemeContext.Provider value={providerValue}>
|
|
||||||
{!disableBaseline && <CssBaseline />}
|
|
||||||
{children}
|
|
||||||
</ThemeContext.Provider>
|
|
||||||
</OverlayProvider>
|
|
||||||
</SSRProvider>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
export type Globals = "inherit" | "initial" | "revert" | "unset";
|
|
||||||
|
|
||||||
export type Index = (number | string) & Record<never, never>;
|
|
||||||
|
|
||||||
export type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`;
|
|
||||||
|
|
||||||
export type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme
|
|
||||||
? keyof Theme[ScaleName]
|
|
||||||
: never;
|
|
||||||
|
|
||||||
export type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends keyof ThemeMap
|
|
||||||
? TokenByScaleName<ThemeMap[PropertyName], Theme>
|
|
||||||
: never;
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
import type * as Stitches from "@stitches/react";
|
|
||||||
import type {Globals, Index, TokenByPropertyName} from "./type-utils";
|
|
||||||
|
|
||||||
import {createThemeBase, config, theme, css} from "./stitches.config";
|
|
||||||
import commonTheme from "./common";
|
|
||||||
|
|
||||||
/** Configuration Interface */
|
|
||||||
export declare namespace ConfigType {
|
|
||||||
/** Media interface. */
|
|
||||||
export type Media<T = {}> = {
|
|
||||||
[name in keyof T]: T[name] extends string ? T[name] : string;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Theme interface. */
|
|
||||||
export type Theme<T = {}> = {
|
|
||||||
fonts?: {[token in number | string]: boolean | number | string};
|
|
||||||
fontSizes?: {[token in number | string]: boolean | number | string};
|
|
||||||
fontWeights?: {[token in number | string]: boolean | number | string};
|
|
||||||
lineHeights?: {[token in number | string]: boolean | number | string};
|
|
||||||
letterSpacings?: {[token in number | string]: boolean | number | string};
|
|
||||||
space?: {[token in number | string]: boolean | number | string};
|
|
||||||
radii?: {[token in number | string]: boolean | number | string};
|
|
||||||
zIndices?: {[token in number | string]: boolean | number | string};
|
|
||||||
borderWidths?: {[token in number | string]: boolean | number | string};
|
|
||||||
colors?: {[token in number | string]: boolean | number | string};
|
|
||||||
shadows?: {[token in number | string]: boolean | number | string};
|
|
||||||
dropShadows?: {[token in number | string]: boolean | number | string};
|
|
||||||
transitions?: {[token in number | string]: boolean | number | string};
|
|
||||||
} & {
|
|
||||||
[Scale in keyof T]: {
|
|
||||||
[Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string
|
|
||||||
? T[Scale][Token]
|
|
||||||
: boolean | number | string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
/** ThemeMap interface. */
|
|
||||||
export type ThemeMap<T = {}> = {
|
|
||||||
[Property in keyof T]: T[Property] extends string ? T[Property] : string;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Utility interface. */
|
|
||||||
export type Utils<T = {}> = {
|
|
||||||
[Property in keyof T]: T[Property] extends (value: infer V) => {}
|
|
||||||
?
|
|
||||||
| T[Property]
|
|
||||||
| ((value: V) => {
|
|
||||||
[K in keyof Stitches.CSSProperties]?: Stitches.CSSProperties[K] | V;
|
|
||||||
})
|
|
||||||
: never;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// stitches types
|
|
||||||
export type StitchesConfig = typeof config;
|
|
||||||
export type VariantProps<T extends {[key: symbol | string]: any}> = Stitches.VariantProps<T>;
|
|
||||||
export type PropertyValue<T extends keyof Stitches.CSSProperties> = Stitches.PropertyValue<T>;
|
|
||||||
export type ScaleValue<T> = Stitches.ScaleValue<T>;
|
|
||||||
export type CSSProperties = Stitches.CSSProperties;
|
|
||||||
export type CSS = Stitches.CSS<StitchesConfig>;
|
|
||||||
export type StitchesTheme = typeof theme;
|
|
||||||
export type CSSComponent = typeof css;
|
|
||||||
|
|
||||||
// theme types
|
|
||||||
export type BaseThemeMap = StitchesConfig["themeMap"];
|
|
||||||
export type BaseTheme = ConfigType.Theme;
|
|
||||||
export type NextUITheme = StitchesTheme;
|
|
||||||
export type ThemeType = "dark" | "light";
|
|
||||||
export type CreateTheme = ReturnType<typeof createThemeBase>;
|
|
||||||
|
|
||||||
export type Theme = {
|
|
||||||
/**
|
|
||||||
* The theme type.
|
|
||||||
* @default "light"
|
|
||||||
*/
|
|
||||||
type?: ThemeType | string;
|
|
||||||
/**
|
|
||||||
* The stitches theme class name.
|
|
||||||
* @see https://stitches.dev/docs/theming#add-a-new-theme
|
|
||||||
*/
|
|
||||||
className?: string;
|
|
||||||
/**
|
|
||||||
* The stitches theme tokens object.
|
|
||||||
*/
|
|
||||||
theme?: BaseTheme;
|
|
||||||
/**
|
|
||||||
* The stitches theme media object.
|
|
||||||
* @see https://stitches.dev/docs/breakpoints
|
|
||||||
*/
|
|
||||||
media?: ConfigType.Media;
|
|
||||||
/**
|
|
||||||
* The theme utils object.
|
|
||||||
* @see https://stitches.dev/docs/utils
|
|
||||||
*/
|
|
||||||
utils?: ConfigType.Utils;
|
|
||||||
/**
|
|
||||||
* The stitches theme themeMap object.
|
|
||||||
* @see https://stitches.dev/docs/tokens#property-mapping
|
|
||||||
*/
|
|
||||||
themeMap?: ConfigType.ThemeMap;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type NextUIThemeContext = {
|
|
||||||
type: ThemeType | string;
|
|
||||||
theme?: NextUITheme;
|
|
||||||
isDark?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
// tokens types
|
|
||||||
export type TokenKeyName = keyof (typeof commonTheme)["theme"];
|
|
||||||
|
|
||||||
export interface TokenValue {
|
|
||||||
token: number | string;
|
|
||||||
value: number | string;
|
|
||||||
scale: string;
|
|
||||||
prefix: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// styles types
|
|
||||||
|
|
||||||
export type CSSProp = {
|
|
||||||
[K in keyof CSSProperties]?:
|
|
||||||
| TokenByPropertyName<K, NextUITheme, BaseThemeMap>
|
|
||||||
| Globals
|
|
||||||
| Index
|
|
||||||
| undefined;
|
|
||||||
};
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import {useContext} from "react";
|
|
||||||
|
|
||||||
import {ThemeContext} from "./theme-context";
|
|
||||||
import {NextUIThemeContext} from "./types";
|
|
||||||
|
|
||||||
export function useTheme() {
|
|
||||||
const theme = useContext(ThemeContext as unknown as React.Context<undefined>);
|
|
||||||
|
|
||||||
if (!theme) {
|
|
||||||
throw Error(
|
|
||||||
"useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return theme as NextUIThemeContext;
|
|
||||||
}
|
|
||||||
@ -1,129 +0,0 @@
|
|||||||
import {clsx, rgbToRgba, hexToRGBA} from "@nextui-org/shared-utils";
|
|
||||||
|
|
||||||
import commonTheme from "./common";
|
|
||||||
import defaultTheme from "./light-theme";
|
|
||||||
import {ThemeType, TokenValue, TokenKeyName} from "./types";
|
|
||||||
|
|
||||||
export const getTokenValue = (token: TokenKeyName, tokenName: string, alpha = 1) => {
|
|
||||||
if (typeof document === "undefined" || !token || !tokenName) return "";
|
|
||||||
|
|
||||||
const name = tokenName.includes("$") ? tokenName.replace("$", "") : tokenName;
|
|
||||||
|
|
||||||
let docStyle = getComputedStyle(document.documentElement);
|
|
||||||
const tokenKey = `--${commonTheme.prefix}-${token}-${name}`;
|
|
||||||
const tokenValue = docStyle.getPropertyValue(tokenKey);
|
|
||||||
|
|
||||||
if (tokenValue && tokenValue.includes("var")) {
|
|
||||||
getTokenValue(token, tokenValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tokenValue && alpha !== 1) {
|
|
||||||
if (tokenValue.includes("rgb")) {
|
|
||||||
return rgbToRgba(tokenValue, alpha);
|
|
||||||
}
|
|
||||||
if (tokenValue.includes("#")) {
|
|
||||||
return hexToRGBA(tokenValue, alpha);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return tokenValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getDocumentCSSTokens = () => {
|
|
||||||
const colorKeys = [...Object.keys(commonTheme.theme.colors), ...Object.keys(defaultTheme.colors)];
|
|
||||||
|
|
||||||
const shadowKeys = Object.keys(defaultTheme.shadows);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* accents1: {
|
|
||||||
* prefix: "nextui"
|
|
||||||
* scale: "colors"
|
|
||||||
* token: "accents1"
|
|
||||||
* value: "var(--nextui-colors-gray100)"
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
const colorTokens = colorKeys.reduce((acc: {[key in string]?: TokenValue}, crr: string) => {
|
|
||||||
const color = getTokenValue("colors", crr);
|
|
||||||
|
|
||||||
if (color) {
|
|
||||||
acc[crr] = {
|
|
||||||
prefix: commonTheme.prefix,
|
|
||||||
scale: "colors",
|
|
||||||
token: crr,
|
|
||||||
value: color,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
const shadowTokens = shadowKeys.reduce((acc: {[key in string]?: TokenValue}, crr: string) => {
|
|
||||||
const shadow = getTokenValue("shadows", crr);
|
|
||||||
|
|
||||||
if (shadow) {
|
|
||||||
acc[crr] = {
|
|
||||||
prefix: commonTheme.prefix,
|
|
||||||
scale: "shadows",
|
|
||||||
token: crr,
|
|
||||||
value: shadow,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
return {
|
|
||||||
colors: colorTokens,
|
|
||||||
shadows: shadowTokens,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns active theme according to the given document
|
|
||||||
*/
|
|
||||||
export const getDocumentTheme = (el: HTMLElement) => {
|
|
||||||
const styleAttrValues =
|
|
||||||
el
|
|
||||||
?.getAttribute("style")
|
|
||||||
?.split(";")
|
|
||||||
.map((el) => el.trim())
|
|
||||||
.filter((el) => el.includes("color-scheme")) || [];
|
|
||||||
|
|
||||||
const colorScheme =
|
|
||||||
styleAttrValues.length > 0
|
|
||||||
? styleAttrValues[0].replace("color-scheme: ", "").replace(";", "")
|
|
||||||
: "";
|
|
||||||
|
|
||||||
const documentTheme = el?.getAttribute("data-theme");
|
|
||||||
|
|
||||||
return documentTheme || colorScheme;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getThemeName = (theme: ThemeType | string) => {
|
|
||||||
if (typeof theme === "string") {
|
|
||||||
return theme?.includes("-theme") ? theme?.replace("-theme", "") : theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
return theme;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const changeTheme = (theme: ThemeType | string) => {
|
|
||||||
if (!document) return;
|
|
||||||
const el = document.documentElement;
|
|
||||||
|
|
||||||
const prevClasses =
|
|
||||||
el
|
|
||||||
?.getAttribute("class")
|
|
||||||
?.split(" ")
|
|
||||||
.filter((cls) => !cls.includes("theme") && !cls.includes("light") && !cls.includes("dark")) ||
|
|
||||||
[];
|
|
||||||
const prevStyles =
|
|
||||||
el
|
|
||||||
?.getAttribute("style")
|
|
||||||
?.split(";")
|
|
||||||
.filter((stl) => !stl.includes("color-scheme") && stl.length)
|
|
||||||
.map((el) => `${el};`) || [];
|
|
||||||
|
|
||||||
el?.setAttribute("class", clsx(prevClasses, `${getThemeName(theme)}-theme`));
|
|
||||||
el?.setAttribute("style", clsx(prevStyles, `color-scheme: ${theme};`));
|
|
||||||
};
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
import type * as Stitches from "@stitches/react";
|
|
||||||
import type {TransformProps} from "@stitches/react/types/styled-component";
|
|
||||||
|
|
||||||
import {ThemeMap, Media, defaultTokens, defaultThemeMap} from "./common";
|
|
||||||
import {theme} from "./stitches.config";
|
|
||||||
import {Prefixed} from "./type-utils";
|
|
||||||
|
|
||||||
type Theme = typeof theme;
|
|
||||||
type TokenKeys = keyof typeof defaultTokens;
|
|
||||||
type CSSProperties = Stitches.CSSProperties;
|
|
||||||
type VariantsToGenerate = {
|
|
||||||
[K in string]: keyof ThemeMap;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* This function returns the possible key/values for a given token scale. It allows to generate variant values
|
|
||||||
* dynamically based on the tokens defined in the theme.
|
|
||||||
*
|
|
||||||
* @param tokensGroup The tokens group to use
|
|
||||||
* @param tokenKey The token key to use
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* getVariants("fonts", "fontFamily")
|
|
||||||
*
|
|
||||||
* // returns
|
|
||||||
* {
|
|
||||||
* "sans": {
|
|
||||||
* "fontFamily": "$sans"
|
|
||||||
* },
|
|
||||||
* "mono": {
|
|
||||||
* "fontFamily": "$mono"
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
function getVariants<TK extends TokenKeys>(scale: TK, prop: keyof CSSProperties) {
|
|
||||||
if (!theme[scale]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Object.keys(theme[scale]).reduce((acc, token) => {
|
|
||||||
// @ts-ignore
|
|
||||||
acc[token] = {
|
|
||||||
// @ts-ignore
|
|
||||||
[prop]: `${theme[scale][token]}`,
|
|
||||||
};
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This function generates variants based on the key & tokens defined in the theme.
|
|
||||||
*
|
|
||||||
* @param variants The variants to generate
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* generateVariants({
|
|
||||||
* bgColor: "backgroundColor",
|
|
||||||
* color: "colors",
|
|
||||||
* })
|
|
||||||
*
|
|
||||||
* // returns
|
|
||||||
*
|
|
||||||
* variants: {
|
|
||||||
* "bgColor": {
|
|
||||||
* "primary": {
|
|
||||||
* backgroundColor: "$blue600"
|
|
||||||
* },
|
|
||||||
* "secondary": {
|
|
||||||
* backgroundColor: "$purple600"
|
|
||||||
* },
|
|
||||||
* "success": {},
|
|
||||||
* .... all the colors defined in the theme
|
|
||||||
* },
|
|
||||||
* "color": {
|
|
||||||
* "primary": {},
|
|
||||||
* "secondary": {},
|
|
||||||
* "success": {},
|
|
||||||
* .... all the colors defined in the theme
|
|
||||||
* },
|
|
||||||
* ... all the variants to generate
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
export function generateVariants<VG extends VariantsToGenerate>(vg: VG) {
|
|
||||||
const variants = Object.keys(vg).reduce((acc, themeMapKey) => {
|
|
||||||
const key = vg[themeMapKey];
|
|
||||||
|
|
||||||
if (!defaultThemeMap[key as keyof ThemeMap]) {
|
|
||||||
return acc;
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapKey = defaultThemeMap[key];
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
acc[themeMapKey] = getVariants(mapKey, key);
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
return {variants} as unknown as {
|
|
||||||
variants: {
|
|
||||||
[K in keyof VG]: {
|
|
||||||
[Q in keyof Theme[ThemeMap[VG[K]]]]: {
|
|
||||||
[P in VG[K]]: Prefixed<"$", Q>;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
type ComponentVariants = {
|
|
||||||
variants: {
|
|
||||||
[Name in string]: {
|
|
||||||
[Variant in string]: {};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type TranformToVariants<V extends ComponentVariants> = {
|
|
||||||
variants: {
|
|
||||||
[K in keyof V["variants"]]?: keyof V["variants"][K];
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export type GeneratedVariantsProps<V extends ComponentVariants> = V extends ComponentVariants
|
|
||||||
? TransformProps<TranformToVariants<V>["variants"], Media>
|
|
||||||
: never;
|
|
||||||
@ -4,6 +4,7 @@ import {pink} from "./pink";
|
|||||||
import {purple} from "./purple";
|
import {purple} from "./purple";
|
||||||
import {red} from "./red";
|
import {red} from "./red";
|
||||||
import {yellow} from "./yellow";
|
import {yellow} from "./yellow";
|
||||||
|
import {cyan} from "./cyan";
|
||||||
|
|
||||||
export const commonColors = {
|
export const commonColors = {
|
||||||
white: "#ffffff",
|
white: "#ffffff",
|
||||||
@ -14,6 +15,7 @@ export const commonColors = {
|
|||||||
purple,
|
purple,
|
||||||
red,
|
red,
|
||||||
yellow,
|
yellow,
|
||||||
|
cyan,
|
||||||
};
|
};
|
||||||
|
|
||||||
export type CommonColors = typeof commonColors;
|
export type CommonColors = typeof commonColors;
|
||||||
|
|||||||
12
packages/core/theme/src/colors/cyan.ts
Normal file
12
packages/core/theme/src/colors/cyan.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export const cyan = {
|
||||||
|
50: "#F0FCFF",
|
||||||
|
100: "#E6FAFE",
|
||||||
|
200: "#D7F8FE",
|
||||||
|
300: "#C3F4FD",
|
||||||
|
400: "#A5EEFD",
|
||||||
|
500: "#7EE7FC",
|
||||||
|
600: "#06B7DB",
|
||||||
|
700: "#09AACD",
|
||||||
|
800: "#0E8AAA",
|
||||||
|
900: "#053B48",
|
||||||
|
};
|
||||||
@ -18,6 +18,22 @@ const base: SemanticBaseColors = {
|
|||||||
border: {
|
border: {
|
||||||
DEFAULT: "#00000026",
|
DEFAULT: "#00000026",
|
||||||
},
|
},
|
||||||
|
content1: {
|
||||||
|
DEFAULT: twColors.zinc[50],
|
||||||
|
contrastText: readableColor(twColors.zinc[50]),
|
||||||
|
},
|
||||||
|
content2: {
|
||||||
|
DEFAULT: twColors.zinc[100],
|
||||||
|
contrastText: readableColor(twColors.zinc[100]),
|
||||||
|
},
|
||||||
|
content3: {
|
||||||
|
DEFAULT: twColors.zinc[200],
|
||||||
|
contrastText: readableColor(twColors.zinc[200]),
|
||||||
|
},
|
||||||
|
content4: {
|
||||||
|
DEFAULT: twColors.zinc[300],
|
||||||
|
contrastText: readableColor(twColors.zinc[300]),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
background: {
|
background: {
|
||||||
@ -29,6 +45,22 @@ const base: SemanticBaseColors = {
|
|||||||
border: {
|
border: {
|
||||||
DEFAULT: "#ffffff26",
|
DEFAULT: "#ffffff26",
|
||||||
},
|
},
|
||||||
|
content1: {
|
||||||
|
DEFAULT: twColors.zinc[900],
|
||||||
|
contrastText: readableColor(twColors.zinc[900]),
|
||||||
|
},
|
||||||
|
content2: {
|
||||||
|
DEFAULT: twColors.zinc[700],
|
||||||
|
contrastText: readableColor(twColors.zinc[700]),
|
||||||
|
},
|
||||||
|
content3: {
|
||||||
|
DEFAULT: twColors.zinc[500],
|
||||||
|
contrastText: readableColor(twColors.zinc[500]),
|
||||||
|
},
|
||||||
|
content4: {
|
||||||
|
DEFAULT: twColors.zinc[400],
|
||||||
|
contrastText: readableColor(twColors.zinc[400]),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -17,6 +17,10 @@ export type BaseColors = {
|
|||||||
background: ColorScale;
|
background: ColorScale;
|
||||||
foreground: ColorScale;
|
foreground: ColorScale;
|
||||||
border: ColorScale;
|
border: ColorScale;
|
||||||
|
content1: ColorScale;
|
||||||
|
content2: ColorScale;
|
||||||
|
content3: ColorScale;
|
||||||
|
content4: ColorScale;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type SemanticColors = BaseColors & {
|
export type SemanticColors = BaseColors & {
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
export * from "./components";
|
export * from "./components";
|
||||||
export * from "./utils";
|
export * from "./utils";
|
||||||
export * from "tailwind-variants";
|
export {tv} from "tailwind-variants";
|
||||||
|
export type {VariantProps} from "tailwind-variants";
|
||||||
|
|||||||
@ -174,7 +174,7 @@ const corePlugin = (config: ConfigObject | ConfigFunction = {}) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const theme = (config: ConfigObject | ConfigFunction = {}) => {
|
export const nextui = (config: ConfigObject | ConfigFunction = {}) => {
|
||||||
const userLightColors = get(config, "light", {});
|
const userLightColors = get(config, "light", {});
|
||||||
const userDarkColors = get(config, "dark", {});
|
const userDarkColors = get(config, "dark", {});
|
||||||
|
|
||||||
|
|||||||
@ -60,15 +60,15 @@ const SematicSwatch = ({
|
|||||||
<div
|
<div
|
||||||
className={`${className} flex flex-col items-center justify-center w-24 h-24 m-2 rounded-xl shadow-lg`}
|
className={`${className} flex flex-col items-center justify-center w-24 h-24 m-2 rounded-xl shadow-lg`}
|
||||||
>
|
>
|
||||||
<span className={textClassName}>{color}</span>
|
<span className={`${textClassName} text-sm`}>{color}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
|
const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
|
||||||
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-4">
|
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2">
|
||||||
{colors.map(({title, items}) => (
|
{colors.map(({title, items}) => (
|
||||||
<div key={title} className="flex flex-col items-start w-full h-full p-4">
|
<div key={title} className="flex flex-col items-start w-full h-full">
|
||||||
<h2 className="text-xl font-bold text-foreground">{title}</h2>
|
<h2 className="text-xl font-bold text-foreground">{title}</h2>
|
||||||
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
|
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
|
||||||
{items.map((c, index) =>
|
{items.map((c, index) =>
|
||||||
@ -90,8 +90,13 @@ const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
|
|||||||
);
|
);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Foundation/Colors",
|
title: "Foundations/Colors",
|
||||||
component: SwatchSet,
|
component: SwatchSet,
|
||||||
|
argTypes: {
|
||||||
|
isSematic: {
|
||||||
|
control: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
} as ComponentMeta<typeof SwatchSet>;
|
} as ComponentMeta<typeof SwatchSet>;
|
||||||
|
|
||||||
const Template: ComponentStory<typeof SwatchSet> = (args: SwatchSetProps) => (
|
const Template: ComponentStory<typeof SwatchSet> = (args: SwatchSetProps) => (
|
||||||
@ -135,6 +140,10 @@ CommonColors.args = {
|
|||||||
title: "Yellow",
|
title: "Yellow",
|
||||||
items: getCommonItems([...Object.values(commonColors.yellow)]),
|
items: getCommonItems([...Object.values(commonColors.yellow)]),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Cyan",
|
||||||
|
items: getCommonItems([...Object.values(commonColors.cyan)]),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -162,6 +171,31 @@ SemanticColors.args = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Content",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "content1",
|
||||||
|
className: "bg-content1",
|
||||||
|
textClassName: "text-content1-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "content2",
|
||||||
|
className: "bg-content2",
|
||||||
|
textClassName: "text-content2-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "content3",
|
||||||
|
className: "bg-content3",
|
||||||
|
textClassName: "text-content3-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "content4",
|
||||||
|
className: "bg-content4",
|
||||||
|
textClassName: "text-content4-contrastText",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Base",
|
title: "Base",
|
||||||
items: [
|
items: [
|
||||||
@ -197,5 +231,335 @@ SemanticColors.args = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Neutral",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "neutral-50",
|
||||||
|
className: "bg-neutral-50",
|
||||||
|
textClassName: "text-neutral-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-100",
|
||||||
|
className: "bg-neutral-100",
|
||||||
|
textClassName: "text-neutral-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-200",
|
||||||
|
className: "bg-neutral-200",
|
||||||
|
textClassName: "text-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-300",
|
||||||
|
className: "bg-neutral-300",
|
||||||
|
textClassName: "text-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-400",
|
||||||
|
className: "bg-neutral-400",
|
||||||
|
textClassName: "text-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-500",
|
||||||
|
className: "bg-neutral-500",
|
||||||
|
textClassName: "text-neutral-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-600",
|
||||||
|
className: "bg-neutral-600",
|
||||||
|
textClassName: "text-neutral-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-700",
|
||||||
|
className: "bg-neutral-700",
|
||||||
|
textClassName: "text-neutral-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-800",
|
||||||
|
className: "bg-neutral-800",
|
||||||
|
textClassName: "text-neutral-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "neutral-900",
|
||||||
|
className: "bg-neutral-900",
|
||||||
|
textClassName: "text-neutral-100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Primary",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "primary-50",
|
||||||
|
className: "bg-primary-50",
|
||||||
|
textClassName: "text-primary-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-100",
|
||||||
|
className: "bg-primary-100",
|
||||||
|
textClassName: "text-primary-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-200",
|
||||||
|
className: "bg-primary-200",
|
||||||
|
textClassName: "text-primary-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-300",
|
||||||
|
className: "bg-primary-300",
|
||||||
|
textClassName: "text-primary-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-400",
|
||||||
|
className: "bg-primary-400",
|
||||||
|
textClassName: "text-primary-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-500",
|
||||||
|
className: "bg-primary-500",
|
||||||
|
textClassName: "text-primary-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-600",
|
||||||
|
className: "bg-primary-600",
|
||||||
|
textClassName: "text-primary-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-700",
|
||||||
|
className: "bg-primary-700",
|
||||||
|
textClassName: "text-primary-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-800",
|
||||||
|
className: "bg-primary-800",
|
||||||
|
textClassName: "text-primary-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "primary-900",
|
||||||
|
className: "bg-primary-900",
|
||||||
|
textClassName: "text-primary-100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Secondary",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "secondary-50",
|
||||||
|
className: "bg-secondary-50",
|
||||||
|
textClassName: "text-secondary-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-100",
|
||||||
|
className: "bg-secondary-100",
|
||||||
|
textClassName: "text-secondary-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-200",
|
||||||
|
className: "bg-secondary-200",
|
||||||
|
textClassName: "text-secondary-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-300",
|
||||||
|
className: "bg-secondary-300",
|
||||||
|
textClassName: "text-secondary-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-400",
|
||||||
|
className: "bg-secondary-400",
|
||||||
|
textClassName: "text-secondary-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-500",
|
||||||
|
className: "bg-secondary-500",
|
||||||
|
textClassName: "text-secondary-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-600",
|
||||||
|
className: "bg-secondary-600",
|
||||||
|
textClassName: "text-secondary-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-700",
|
||||||
|
className: "bg-secondary-700",
|
||||||
|
textClassName: "text-secondary-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-800",
|
||||||
|
className: "bg-secondary-800",
|
||||||
|
textClassName: "text-secondary-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "secondary-900",
|
||||||
|
className: "bg-secondary-900",
|
||||||
|
textClassName: "text-secondary-100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Success",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "success-50",
|
||||||
|
className: "bg-success-50",
|
||||||
|
textClassName: "text-success-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-100",
|
||||||
|
className: "bg-success-100",
|
||||||
|
textClassName: "text-success-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-200",
|
||||||
|
className: "bg-success-200",
|
||||||
|
textClassName: "text-success-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-300",
|
||||||
|
className: "bg-success-300",
|
||||||
|
textClassName: "text-success-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-400",
|
||||||
|
className: "bg-success-400",
|
||||||
|
textClassName: "text-success-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-500",
|
||||||
|
className: "bg-success-500",
|
||||||
|
textClassName: "text-success-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-600",
|
||||||
|
className: "bg-success-600",
|
||||||
|
textClassName: "text-success-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-700",
|
||||||
|
className: "bg-success-700",
|
||||||
|
textClassName: "text-success-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-800",
|
||||||
|
className: "bg-success-800",
|
||||||
|
textClassName: "text-success-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "success-900",
|
||||||
|
className: "bg-success-900",
|
||||||
|
textClassName: "text-success-100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Warning",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "warning-50",
|
||||||
|
className: "bg-warning-50",
|
||||||
|
textClassName: "text-warning-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-100",
|
||||||
|
className: "bg-warning-100",
|
||||||
|
textClassName: "text-warning-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-200",
|
||||||
|
className: "bg-warning-200",
|
||||||
|
textClassName: "text-warning-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-300",
|
||||||
|
className: "bg-warning-300",
|
||||||
|
textClassName: "text-warning-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-400",
|
||||||
|
className: "bg-warning-400",
|
||||||
|
textClassName: "text-warning-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-500",
|
||||||
|
className: "bg-warning-500",
|
||||||
|
textClassName: "text-warning-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-600",
|
||||||
|
className: "bg-warning-600",
|
||||||
|
textClassName: "text-warning-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-700",
|
||||||
|
className: "bg-warning-700",
|
||||||
|
textClassName: "text-warning-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-800",
|
||||||
|
className: "bg-warning-800",
|
||||||
|
textClassName: "text-warning-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "warning-900",
|
||||||
|
className: "bg-warning-900",
|
||||||
|
textClassName: "text-warning-100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Danger",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
color: "danger-50",
|
||||||
|
className: "bg-danger-50",
|
||||||
|
textClassName: "text-danger-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-100",
|
||||||
|
className: "bg-danger-100",
|
||||||
|
textClassName: "text-danger-900",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-200",
|
||||||
|
className: "bg-danger-200",
|
||||||
|
textClassName: "text-danger-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-300",
|
||||||
|
className: "bg-danger-300",
|
||||||
|
textClassName: "text-danger-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-400",
|
||||||
|
className: "bg-danger-400",
|
||||||
|
textClassName: "text-danger-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-500",
|
||||||
|
className: "bg-danger-500",
|
||||||
|
textClassName: "text-danger-contrastText",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-600",
|
||||||
|
className: "bg-danger-600",
|
||||||
|
textClassName: "text-danger-50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-700",
|
||||||
|
className: "bg-danger-700",
|
||||||
|
textClassName: "text-danger-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-800",
|
||||||
|
className: "bg-danger-800",
|
||||||
|
textClassName: "text-danger-100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "danger-900",
|
||||||
|
className: "bg-danger-900",
|
||||||
|
textClassName: "text-danger-100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"include": ["src/index.ts"]
|
"include": ["src/index.ts"],
|
||||||
|
"exclude": ["**/*.js"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,11 +34,11 @@
|
|||||||
"postpack": "clean-package restore"
|
"postpack": "clean-package restore"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0"
|
"react": ">=18"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-package": "2.2.0",
|
"clean-package": "2.2.0",
|
||||||
"react": "^18.2.0"
|
"react": "^18.0.0"
|
||||||
},
|
},
|
||||||
"tsup": {
|
"tsup": {
|
||||||
"clean": true,
|
"clean": true,
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user