github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: themes folder structure

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-07-07 01:08:21 +05:30
parent de90f3fa93
commit b9ada76c19
11 changed files with 79 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
View File

@ -22,7 +22,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
data={[
{
id: "issues_closed",
color: "rgb(var(--color-accent))",
color: "rgb(var(--color-primary-100))",
data: MONTHS_LIST.map((month) => ({
x: month.label.substring(0, 3),
y:
@ -50,7 +50,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
</div>
)}
theme={{
background: "rgb(var(--color-bg-base))",
background: "rgb(var(--color-background-100))",
}}
enableArea
/>

4
apps/app/components/core/index.ts
View File

@ -5,10 +5,8 @@ export * from "./gantt-chart-view";
export * from "./list-view";
export * from "./modals";
export * from "./spreadsheet-view";
export * from "./theme";
export * from "./sidebar";
export * from "./issues-view";
export * from "./image-picker-popover";
export * from "./feeds";
export * from "./theme-switch";
export * from "./custom-theme-selector";
export * from "./color-picker-input";

0
apps/app/components/core/color-picker-input.tsx → apps/app/components/core/theme/color-picker-input.tsx
View File

0
apps/app/components/core/custom-theme-selector.tsx → apps/app/components/core/theme/custom-theme-selector.tsx
View File

3
apps/app/components/core/theme/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from "./color-picker-input";
export * from "./custom-theme-selector";
export * from "./theme-switch";

4
apps/app/components/core/theme-switch.tsx → apps/app/components/core/theme/theme-switch.tsx
View File

@ -82,8 +82,8 @@ export const ThemeSwitch: React.FC<Props> = ({
document.documentElement.style.removeProperty(`--color-background-${i}`);
document.documentElement.style.removeProperty(`--color-text-${i}`);
document.documentElement.style.removeProperty(`--color-primary-${i}`);
document.documentElement.style.removeProperty(`--color-sidebarBackground-${i}`);
document.documentElement.style.removeProperty(`--color-sidebarText-${i}`);
document.documentElement.style.removeProperty(`--color-sidebar-background-${i}`);
document.documentElement.style.removeProperty(`--color-sidebar-text-${i}`);
}
}
setTheme(value);

14
apps/app/constants/graph.ts
View File

@ -2,27 +2,27 @@
import { Theme } from "@nivo/core";
export const CHARTS_THEME: Theme = {
background: "rgb(var(--color-bg-surface-1))",
textColor: "rgb(var(--color-text-secondary))",
background: "rgb(var(--color-background-90))",
textColor: "rgb(var(--color-text-200))",
axis: {
domain: {
line: {
stroke: "rgb(var(--color-border))",
stroke: "rgb(var(--color-background-80))",
strokeWidth: 0.5,
},
},
},
tooltip: {
container: {
background: "rgb(var(--color-bg-surface-2))",
color: "rgb(var(--color-text-secondary))",
background: "rgb(var(--color-background-80))",
color: "rgb(var(--color-text-200))",
fontSize: "0.8rem",
border: "1px solid rgb(var(--color-border))",
border: "1px solid rgb(var(--color-background-80))",
},
},
grid: {
line: {
stroke: "rgb(var(--color-border))",
stroke: "rgb(var(--color-background-80))",
},
},
};

6
apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
View File

@ -94,10 +94,10 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
<main
className={`relative flex h-full w-full flex-col overflow-hidden ${
bg === "primary"
? "bg-brand-surface-1"
? "bg-brand-base"
: bg === "secondary"
? "bg-brand-sidebar"
: "bg-brand-base"
? "bg-brand-surface-1"
: "bg-brand-surface-2"
}`}
>
<AppHeader

6
apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
View File

@ -101,10 +101,10 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
<main
className={`relative flex h-full w-full flex-col overflow-hidden ${
bg === "primary"
? "bg-brand-surface-1"
? "bg-brand-base"
: bg === "secondary"
? "bg-brand-sidebar"
: "bg-brand-base"
? "bg-brand-surface-1"
: "bg-brand-surface-2"
}`}
>
<AppHeader

57
apps/app/styles/globals.css
View File

@ -153,6 +153,63 @@
--color-background-700: 38, 38, 38;
--color-background-800: 34, 34, 34;
--color-background-900: 23, 23, 23;
--color-text-10: 250, 250, 250;
--color-text-20: 245, 245, 245;
--color-text-30: 241, 241, 241;
--color-text-40: 229, 229, 229;
--color-text-50: 212, 212, 212;
--color-text-60: 185, 185, 185;
--color-text-70: 163, 163, 163;
--color-text-80: 157, 157, 157;
--color-text-90: 129, 129, 129;
--color-text-100: 115, 115, 115;
--color-text-200: 104, 104, 104;
--color-text-300: 82, 82, 82;
--color-text-400: 64, 64, 64;
--color-text-500: 58, 58, 58;
--color-text-600: 46, 46, 46;
--color-text-700: 38, 38, 38;
--color-text-800: 34, 34, 34;
--color-text-900: 23, 23, 23;
--color-sidebar-background-10: 250, 250, 250;
--color-sidebar-background-20: 245, 245, 245;
--color-sidebar-background-30: 241, 241, 241;
--color-sidebar-background-40: 229, 229, 229;
--color-sidebar-background-50: 212, 212, 212;
--color-sidebar-background-60: 185, 185, 185;
--color-sidebar-background-70: 163, 163, 163;
--color-sidebar-background-80: 157, 157, 157;
--color-sidebar-background-90: 129, 129, 129;
--color-sidebar-background-100: 115, 115, 115;
--color-sidebar-background-200: 104, 104, 104;
--color-sidebar-background-300: 82, 82, 82;
--color-sidebar-background-400: 64, 64, 64;
--color-sidebar-background-500: 58, 58, 58;
--color-sidebar-background-600: 46, 46, 46;
--color-sidebar-background-700: 38, 38, 38;
--color-sidebar-background-800: 34, 34, 34;
--color-sidebar-background-900: 23, 23, 23;
--color-sidebar-text-10: 250, 250, 250;
--color-sidebar-text-20: 245, 245, 245;
--color-sidebar-text-30: 241, 241, 241;
--color-sidebar-text-40: 229, 229, 229;
--color-sidebar-text-50: 212, 212, 212;
--color-sidebar-text-60: 185, 185, 185;
--color-sidebar-text-70: 163, 163, 163;
--color-sidebar-text-80: 157, 157, 157;
--color-sidebar-text-90: 129, 129, 129;
--color-sidebar-text-100: 115, 115, 115;
--color-sidebar-text-200: 104, 104, 104;
--color-sidebar-text-300: 82, 82, 82;
--color-sidebar-text-400: 64, 64, 64;
--color-sidebar-text-500: 58, 58, 58;
--color-sidebar-text-600: 46, 46, 46;
--color-sidebar-text-700: 38, 38, 38;
--color-sidebar-text-800: 34, 34, 34;
--color-sidebar-text-900: 23, 23, 23;
}
[data-theme="light-contrast"] {

1
apps/app/tailwind.config.js
View File

@ -8,6 +8,7 @@ module.exports = {
borderColor: {
brand: {
base: convertToRGB("--color-background-80"),
secondary: convertToRGB("--color-background-90"),
},
},
backgroundColor: {