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

chore: new color scheming

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-07-06 17:50:32 +05:30
parent ba904d5c9a
commit de90f3fa93
2 changed files with 154 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,60 +17,142 @@
}
:root {
--color-bg-base: 255, 255, 255;
--color-bg-surface-1: 249, 250, 251;
--color-bg-surface-2: 243, 244, 246;
--color-primary-10: 236, 241, 255;
--color-primary-20: 217, 228, 255;
--color-primary-30: 197, 214, 255;
--color-primary-40: 178, 200, 255;
--color-primary-50: 159, 187, 255;
--color-primary-60: 140, 173, 255;
--color-primary-70: 121, 159, 255;
--color-primary-80: 101, 145, 255;
--color-primary-90: 82, 132, 255;
--color-primary-100: 63, 118, 255;
--color-primary-200: 57, 106, 230;
--color-primary-300: 50, 94, 204;
--color-primary-400: 44, 83, 179;
--color-primary-500: 38, 71, 153;
--color-primary-600: 32, 59, 128;
--color-primary-700: 25, 47, 102;
--color-primary-800: 19, 35, 76;
--color-primary-900: 13, 24, 51;
--color-border: 229, 231, 235;
--color-bg-sidebar: 255, 255, 255;
--color-accent-50: 236, 241, 255;
--color-accent-100: 217, 228, 255;
--color-accent-200: 178, 200, 255;
--color-accent-300: 140, 173, 255;
--color-accent-400: 101, 145, 255;
--color-accent-500: 63, 118, 255;
--color-accent-600: 57, 106, 230;
--color-accent-700: 50, 94, 204;
--color-accent-800: 44, 83, 179;
--color-accent-900: 38, 71, 153;
--color-background-10: 250, 250, 250;
--color-background-20: 245, 245, 245;
--color-background-30: 241, 241, 241;
--color-background-40: 229, 229, 229;
--color-background-50: 212, 212, 212;
--color-background-60: 185, 185, 185;
--color-background-70: 163, 163, 163;
--color-background-80: 157, 157, 157;
--color-background-90: 129, 129, 129;
--color-background-100: 115, 115, 115;
--color-background-200: 104, 104, 104;
--color-background-300: 82, 82, 82;
--color-background-400: 64, 64, 64;
--color-background-500: 58, 58, 58;
--color-background-600: 46, 46, 46;
--color-background-700: 38, 38, 38;
--color-background-800: 34, 34, 34;
--color-background-900: 23, 23, 23;
--color-text-base: 3, 7, 18;
--color-text-secondary: 55, 65, 81;
--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"] {
--color-bg-50: 250, 250, 250;
--color-bg-100: 250, 250, 250;
--color-bg-200: 250, 250, 250;
--color-bg-300: 250, 250, 250;
--color-bg-400: 250, 250, 250;
--color-bg-500: 250, 250, 250;
--color-bg-600: 250, 250, 250;
--color-bg-700: 250, 250, 250;
--color-bg-800: 250, 250, 250;
--color-bg-900: 250, 250, 250;
--color-border: 229, 231, 235;
--color-bg-sidebar: 255, 255, 255;
--color-background-10: 250, 250, 250;
--color-background-20: 245, 245, 245;
--color-background-30: 241, 241, 241;
--color-background-40: 229, 229, 229;
--color-background-50: 212, 212, 212;
--color-background-60: 185, 185, 185;
--color-background-70: 163, 163, 163;
--color-background-80: 157, 157, 157;
--color-background-90: 129, 129, 129;
--color-background-100: 255, 255, 255;
--color-background-200: 104, 104, 104;
--color-background-300: 82, 82, 82;
--color-background-400: 64, 64, 64;
--color-background-500: 58, 58, 58;
--color-background-600: 46, 46, 46;
--color-background-700: 38, 38, 38;
--color-background-800: 34, 34, 34;
--color-background-900: 23, 23, 23;
}
[data-theme="dark"] {
--color-bg-50: 250, 250, 250;
--color-bg-100: 245, 245, 245;
--color-bg-200: 229, 229, 229;
--color-bg-300: 212, 212, 212;
--color-bg-400: 163, 163, 163;
--color-bg-500: 115, 115, 115;
--color-bg-600: 82, 82, 82;
--color-bg-700: 64, 64, 64;
--color-bg-800: 38, 38, 38;
--color-bg-900: 23, 23, 23;
--color-border: 46, 50, 52;
--color-bg-sidebar: 19, 20, 22;
--color-text-base: 233, 244, 252;
--color-text-secondary: 142, 148, 146;
--color-background-10: 250, 250, 250;
--color-background-20: 245, 245, 245;
--color-background-30: 241, 241, 241;
--color-background-40: 229, 229, 229;
--color-background-50: 212, 212, 212;
--color-background-60: 185, 185, 185;
--color-background-70: 163, 163, 163;
--color-background-80: 157, 157, 157;
--color-background-90: 129, 129, 129;
--color-background-100: 115, 115, 115;
--color-background-200: 104, 104, 104;
--color-background-300: 82, 82, 82;
--color-background-400: 64, 64, 64;
--color-background-500: 58, 58, 58;
--color-background-600: 46, 46, 46;
--color-background-700: 38, 38, 38;
--color-background-800: 34, 34, 34;
--color-background-900: 23, 23, 23;
}
[data-theme="light-contrast"] {
@ -115,7 +197,7 @@
}
body {
color: rgba(var(--color-text-base));
color: rgba(var(--color-text-100));
}
/* scrollbar style */

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

@ -5,7 +5,32 @@ module.exports = {
content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
theme: {
extend: {
borderColor: {
brand: {
base: convertToRGB("--color-background-80"),
},
},
backgroundColor: {
brand: {
base: convertToRGB("--color-background-100"),
"surface-1": convertToRGB("--color-background-90"),
"surface-2": convertToRGB("--color-background-80"),
sidebar: convertToRGB("--color-sidebar-background-100"),
backdrop: "#131313",
},
},
textColor: {
brand: {
base: convertToRGB("--color-text-100"),
secondary: convertToRGB("--color-text-200"),
},
},
colors: {
brand: {
base: convertToRGB("--color-background-100"),
accent: convertToRGB("--color-primary-100"),
backdrop: "#131313",
},
custom: {
primary: {
0: "rgb(255, 255, 255)",