mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
144 lines
7.5 KiB
TypeScript
144 lines
7.5 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
// layouts
|
||
|
|
import DefaultLayout from "layouts/default-layout";
|
||
|
|
import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
|
||
|
|
// types
|
||
|
|
import type { NextPage } from "next";
|
||
|
|
|
||
|
|
const Colors: NextPage = () => (
|
||
|
|
<UserAuthorizationLayout>
|
||
|
|
<DefaultLayout>
|
||
|
|
<div className="space-y-8 p-8">
|
||
|
|
<div>
|
||
|
|
Primary:
|
||
|
|
<div className="flex flex-wrap">
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-0" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-10" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-20" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-30" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-40" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-50" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-60" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-70" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-80" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-90" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-100" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-200" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-300" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-400" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-500" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-600" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-700" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-800" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-900" />
|
||
|
|
<div className="h-12 w-12 bg-custom-primary-1000" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Background:
|
||
|
|
<div className="flex flex-wrap">
|
||
|
|
<div className="h-12 w-12 bg-custom-background-0" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-10" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-20" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-30" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-40" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-50" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-60" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-70" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-80" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-90" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-100" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-200" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-300" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-400" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-500" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-600" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-700" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-800" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-900" />
|
||
|
|
<div className="h-12 w-12 bg-custom-background-1000" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Text:
|
||
|
|
<div className="flex flex-wrap">
|
||
|
|
<div className="h-12 w-12 bg-custom-text-0" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-10" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-20" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-30" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-40" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-50" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-60" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-70" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-80" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-90" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-100" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-200" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-300" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-400" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-500" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-600" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-700" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-800" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-900" />
|
||
|
|
<div className="h-12 w-12 bg-custom-text-1000" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Sidebar Background:
|
||
|
|
<div className="flex flex-wrap">
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-0" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-10" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-20" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-30" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-40" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-50" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-60" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-70" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-80" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-90" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-100" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-200" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-300" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-400" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-500" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-600" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-700" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-800" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-900" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-background-1000" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Sidebar Text:
|
||
|
|
<div className="flex flex-wrap">
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-0" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-10" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-20" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-30" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-40" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-50" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-60" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-70" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-80" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-90" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-100" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-200" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-300" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-400" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-500" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-600" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-700" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-800" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-900" />
|
||
|
|
<div className="h-12 w-12 bg-custom-sidebar-text-1000" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</DefaultLayout>
|
||
|
|
</UserAuthorizationLayout>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default Colors;
|