Compare commits
14
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Anmol Singh Bhatia
|
2c615bc850 | ||
|
Anmol Singh Bhatia
|
d5d0e72ab8 | ||
|
Anmol Singh Bhatia
|
a46a7b1926 | ||
|
Anmol Singh Bhatia
|
49fc6467b7 | ||
|
Anmol Singh Bhatia
|
44c5653655 | ||
|
Anmol Singh Bhatia
|
80017d7bb1 | ||
|
Anmol Singh Bhatia
|
0ba549ac28 | ||
|
Anmol Singh Bhatia
|
4e8422fe7e | ||
|
Anmol Singh Bhatia
|
d439aecf3f | ||
|
Anmol Singh Bhatia
|
ebb70cad90 | ||
|
Anmol Singh Bhatia
|
cb8212436c | ||
|
Anmol Singh Bhatia
|
c7ece76fa5 | ||
|
Anmol Singh Bhatia
|
b4fa134cde | ||
|
Anmol Singh Bhatia
|
45e56c4065 |
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
|
||||
// plane imports
|
||||
import { ADMIN_BASE_PATH } from "@plane/constants";
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
import "@plane/tailwind-config/global.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Plane | Simple, extensible, open-source project management tool.",
|
||||
|
||||
@@ -1,396 +0,0 @@
|
||||
@import "@plane/propel/styles/fonts";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.text-1\.5xl {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
.text-2\.5xl {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-primary-10: 229, 243, 250;
|
||||
--color-primary-20: 216, 237, 248;
|
||||
--color-primary-30: 199, 229, 244;
|
||||
--color-primary-40: 169, 214, 239;
|
||||
--color-primary-50: 144, 202, 234;
|
||||
--color-primary-60: 109, 186, 227;
|
||||
--color-primary-70: 75, 170, 221;
|
||||
--color-primary-80: 41, 154, 214;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 0, 99, 153;
|
||||
--color-primary-200: 0, 92, 143;
|
||||
--color-primary-300: 0, 86, 133;
|
||||
--color-primary-400: 0, 77, 117;
|
||||
--color-primary-500: 0, 66, 102;
|
||||
--color-primary-600: 0, 53, 82;
|
||||
--color-primary-700: 0, 43, 66;
|
||||
--color-primary-800: 0, 33, 51;
|
||||
--color-primary-900: 0, 23, 36;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.14);
|
||||
--color-shadow-xs:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 8px -1px rgba(16, 24, 40, 0.1);
|
||||
--color-shadow-sm:
|
||||
0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
|
||||
--color-shadow-rg:
|
||||
0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
|
||||
0px 1px 12px 0px rgba(16, 24, 40, 0.04);
|
||||
--color-shadow-md:
|
||||
0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-lg:
|
||||
0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 24px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
|
||||
0px 0px 52px 0px rgba(16, 24, 40, 0.16);
|
||||
--color-shadow-2xl:
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 32px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-3xl:
|
||||
0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 48px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
|
||||
--color-sidebar-shadow-2xs: var(--color-shadow-2xs);
|
||||
--color-sidebar-shadow-xs: var(--color-shadow-xs);
|
||||
--color-sidebar-shadow-sm: var(--color-shadow-sm);
|
||||
--color-sidebar-shadow-rg: var(--color-shadow-rg);
|
||||
--color-sidebar-shadow-md: var(--color-shadow-md);
|
||||
--color-sidebar-shadow-lg: var(--color-shadow-lg);
|
||||
--color-sidebar-shadow-xl: var(--color-shadow-xl);
|
||||
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
|
||||
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
|
||||
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="light-contrast"] {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 62, 155, 79;
|
||||
--color-toast-error-text: 220, 62, 66;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 51, 88, 212;
|
||||
--color-toast-loading-text: 28, 32, 36;
|
||||
--color-toast-secondary-text: 128, 131, 141;
|
||||
--color-toast-tertiary-text: 96, 100, 108;
|
||||
|
||||
--color-toast-success-background: 253, 253, 254;
|
||||
--color-toast-error-background: 255, 252, 252;
|
||||
--color-toast-warning-background: 254, 253, 251;
|
||||
--color-toast-info-background: 253, 253, 254;
|
||||
--color-toast-loading-background: 253, 253, 254;
|
||||
|
||||
--color-toast-success-border: 218, 241, 219;
|
||||
--color-toast-error-border: 255, 219, 220;
|
||||
--color-toast-warning-border: 255, 247, 194;
|
||||
--color-toast-info-border: 210, 222, 255;
|
||||
--color-toast-loading-border: 224, 225, 230;
|
||||
}
|
||||
|
||||
[data-theme="light-contrast"] {
|
||||
--color-text-100: 11, 11, 11; /* primary text */
|
||||
--color-text-200: 38, 38, 38; /* secondary text */
|
||||
--color-text-300: 58, 58, 58; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark-contrast"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-primary-10: 8, 31, 43;
|
||||
--color-primary-20: 10, 37, 51;
|
||||
--color-primary-30: 13, 49, 69;
|
||||
--color-primary-40: 16, 58, 81;
|
||||
--color-primary-50: 18, 68, 94;
|
||||
--color-primary-60: 23, 86, 120;
|
||||
--color-primary-70: 28, 104, 146;
|
||||
--color-primary-80: 31, 116, 163;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 40, 146, 204;
|
||||
--color-primary-200: 41, 154, 214;
|
||||
--color-primary-300: 75, 170, 221;
|
||||
--color-primary-400: 109, 186, 227;
|
||||
--color-primary-500: 144, 202, 234;
|
||||
--color-primary-600: 169, 214, 239;
|
||||
--color-primary-700: 199, 229, 244;
|
||||
--color-primary-800: 216, 237, 248;
|
||||
--color-primary-900: 229, 243, 250;
|
||||
|
||||
--color-background-100: 25, 25, 25; /* primary bg */
|
||||
--color-background-90: 32, 32, 32; /* secondary bg */
|
||||
--color-background-80: 44, 44, 44; /* tertiary bg */
|
||||
|
||||
--color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-text-100: 229, 229, 229; /* primary text */
|
||||
--color-text-200: 163, 163, 163; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-400: 82, 82, 82; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 82, 82, 82; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-text-100: 250, 250, 250; /* primary text */
|
||||
--color-text-200: 241, 241, 241; /* secondary text */
|
||||
--color-text-300: 212, 212, 212; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="dark"],
|
||||
[data-theme="light-contrast"],
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
font-variant-ligatures: none;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
/* scrollbar style */
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.vertical-scrollbar,
|
||||
.horizontal-scrollbar {
|
||||
scrollbar-width: initial;
|
||||
scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
|
||||
}
|
||||
.vertical-scrollbar:hover,
|
||||
.horizontal-scrollbar:hover {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
|
||||
}
|
||||
.vertical-scrollbar:active,
|
||||
.horizontal-scrollbar:active {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar,
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-track,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(96, 100, 108, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(96, 100, 108, 0.25);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(96, 100, 108, 0.5);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:active,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(96, 100, 108, 0.7);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-corner,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
/* scrollbar sm size */
|
||||
.scrollbar-sm::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.scrollbar-sm::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar md size */
|
||||
.scrollbar-md::-webkit-scrollbar {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
.scrollbar-md::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar lg size */
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.scrollbar-lg::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* end scrollbar style */
|
||||
|
||||
/* progress bar */
|
||||
.progress-bar {
|
||||
fill: currentColor;
|
||||
color: rgba(var(--color-sidebar-background-100));
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder,
|
||||
::placeholder,
|
||||
:-ms-input-placeholder {
|
||||
color: rgb(var(--color-text-400));
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
|
||||
// helpers
|
||||
import { SPACE_BASE_PATH } from "@plane/constants";
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
import "@plane/tailwind-config/global.css";
|
||||
// components
|
||||
import { AppProvider } from "./provider";
|
||||
|
||||
|
||||
@@ -1,497 +0,0 @@
|
||||
@import "@plane/propel/styles/fonts";
|
||||
@import "@plane/editor/styles";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-primary-10: 229, 243, 250;
|
||||
--color-primary-20: 216, 237, 248;
|
||||
--color-primary-30: 199, 229, 244;
|
||||
--color-primary-40: 169, 214, 239;
|
||||
--color-primary-50: 144, 202, 234;
|
||||
--color-primary-60: 109, 186, 227;
|
||||
--color-primary-70: 75, 170, 221;
|
||||
--color-primary-80: 41, 154, 214;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 0, 99, 153;
|
||||
--color-primary-200: 0, 92, 143;
|
||||
--color-primary-300: 0, 86, 133;
|
||||
--color-primary-400: 0, 77, 117;
|
||||
--color-primary-500: 0, 66, 102;
|
||||
--color-primary-600: 0, 53, 82;
|
||||
--color-primary-700: 0, 43, 66;
|
||||
--color-primary-800: 0, 33, 51;
|
||||
--color-primary-900: 0, 23, 36;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.14);
|
||||
--color-shadow-xs:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 8px -1px rgba(16, 24, 40, 0.1);
|
||||
--color-shadow-sm:
|
||||
0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
|
||||
--color-shadow-rg:
|
||||
0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
|
||||
0px 1px 12px 0px rgba(16, 24, 40, 0.04);
|
||||
--color-shadow-md:
|
||||
0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-lg:
|
||||
0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 24px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
|
||||
0px 0px 52px 0px rgba(16, 24, 40, 0.16);
|
||||
--color-shadow-2xl:
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 32px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-3xl:
|
||||
0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 48px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
|
||||
--color-sidebar-shadow-2xs: var(--color-shadow-2xs);
|
||||
--color-sidebar-shadow-xs: var(--color-shadow-xs);
|
||||
--color-sidebar-shadow-sm: var(--color-shadow-sm);
|
||||
--color-sidebar-shadow-rg: var(--color-shadow-rg);
|
||||
--color-sidebar-shadow-md: var(--color-shadow-md);
|
||||
--color-sidebar-shadow-lg: var(--color-shadow-lg);
|
||||
--color-sidebar-shadow-xl: var(--color-shadow-xl);
|
||||
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
|
||||
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
|
||||
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="light-contrast"] {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
|
||||
--gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
|
||||
--color-onboarding-text-100: 23, 23, 23;
|
||||
--color-onboarding-text-200: 58, 58, 58;
|
||||
--color-onboarding-text-300: 82, 82, 82;
|
||||
--color-onboarding-text-400: 163, 163, 163;
|
||||
|
||||
--color-onboarding-background-100: 236, 241, 255;
|
||||
--color-onboarding-background-200: 255, 255, 255;
|
||||
--color-onboarding-background-300: 236, 241, 255;
|
||||
--color-onboarding-background-400: 177, 206, 250;
|
||||
|
||||
--color-onboarding-border-100: 229, 229, 229;
|
||||
--color-onboarding-border-200: 217, 228, 255;
|
||||
--color-onboarding-border-300: 229, 229, 229, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 62, 155, 79;
|
||||
--color-toast-error-text: 220, 62, 66;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 51, 88, 212;
|
||||
--color-toast-loading-text: 28, 32, 36;
|
||||
--color-toast-secondary-text: 128, 131, 141;
|
||||
--color-toast-tertiary-text: 96, 100, 108;
|
||||
|
||||
--color-toast-success-background: 253, 253, 254;
|
||||
--color-toast-error-background: 255, 252, 252;
|
||||
--color-toast-warning-background: 254, 253, 251;
|
||||
--color-toast-info-background: 253, 253, 254;
|
||||
--color-toast-loading-background: 253, 253, 254;
|
||||
|
||||
--color-toast-success-border: 218, 241, 219;
|
||||
--color-toast-error-border: 255, 219, 220;
|
||||
--color-toast-warning-border: 255, 247, 194;
|
||||
--color-toast-info-border: 210, 222, 255;
|
||||
--color-toast-loading-border: 224, 225, 230;
|
||||
}
|
||||
|
||||
[data-theme="light-contrast"] {
|
||||
--color-text-100: 11, 11, 11; /* primary text */
|
||||
--color-text-200: 38, 38, 38; /* secondary text */
|
||||
--color-text-300: 58, 58, 58; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark-contrast"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-primary-10: 8, 31, 43;
|
||||
--color-primary-20: 10, 37, 51;
|
||||
--color-primary-30: 13, 49, 69;
|
||||
--color-primary-40: 16, 58, 81;
|
||||
--color-primary-50: 18, 68, 94;
|
||||
--color-primary-60: 23, 86, 120;
|
||||
--color-primary-70: 28, 104, 146;
|
||||
--color-primary-80: 31, 116, 163;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 40, 146, 204;
|
||||
--color-primary-200: 41, 154, 214;
|
||||
--color-primary-300: 75, 170, 221;
|
||||
--color-primary-400: 109, 186, 227;
|
||||
--color-primary-500: 144, 202, 234;
|
||||
--color-primary-600: 169, 214, 239;
|
||||
--color-primary-700: 199, 229, 244;
|
||||
--color-primary-800: 216, 237, 248;
|
||||
--color-primary-900: 229, 243, 250;
|
||||
|
||||
--color-background-100: 25, 25, 25; /* primary bg */
|
||||
--color-background-90: 32, 32, 32; /* secondary bg */
|
||||
--color-background-80: 44, 44, 44; /* tertiary bg */
|
||||
|
||||
--color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-text-100: 229, 229, 229; /* primary text */
|
||||
--color-text-200: 163, 163, 163; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-400: 82, 82, 82; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 82, 82, 82; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
|
||||
|
||||
--color-onboarding-text-100: 237, 238, 240;
|
||||
--color-onboarding-text-200: 176, 180, 187;
|
||||
--color-onboarding-text-300: 118, 123, 132;
|
||||
--color-onboarding-text-400: 105, 110, 119;
|
||||
|
||||
--color-onboarding-background-100: 54, 58, 64;
|
||||
--color-onboarding-background-200: 40, 42, 45;
|
||||
--color-onboarding-background-300: 40, 42, 45;
|
||||
--color-onboarding-background-400: 67, 72, 79;
|
||||
|
||||
--color-onboarding-border-100: 54, 58, 64;
|
||||
--color-onboarding-border-200: 54, 58, 64;
|
||||
--color-onboarding-border-300: 34, 35, 38, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-text-100: 250, 250, 250; /* primary text */
|
||||
--color-text-200: 241, 241, 241; /* secondary text */
|
||||
--color-text-300: 212, 212, 212; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="dark"],
|
||||
[data-theme="light-contrast"],
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
|
||||
/* stickies and editor colors */
|
||||
:root {
|
||||
/* text colors */
|
||||
--editor-colors-gray-text: #5c5e63;
|
||||
--editor-colors-peach-text: #ff5b59;
|
||||
--editor-colors-pink-text: #f65385;
|
||||
--editor-colors-orange-text: #fd9038;
|
||||
--editor-colors-green-text: #0fc27b;
|
||||
--editor-colors-light-blue-text: #17bee9;
|
||||
--editor-colors-dark-blue-text: #266df0;
|
||||
--editor-colors-purple-text: #9162f9;
|
||||
/* end text colors */
|
||||
|
||||
/* background colors */
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
/* end background colors */
|
||||
}
|
||||
/* background colors */
|
||||
[data-theme*="light"] {
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
}
|
||||
[data-theme*="dark"] {
|
||||
--editor-colors-gray-background: #404144;
|
||||
--editor-colors-peach-background: #593032;
|
||||
--editor-colors-pink-background: #562e3d;
|
||||
--editor-colors-orange-background: #583e2a;
|
||||
--editor-colors-green-background: #1d4a3b;
|
||||
--editor-colors-light-blue-background: #1f495c;
|
||||
--editor-colors-dark-blue-background: #223558;
|
||||
--editor-colors-purple-background: #3d325a;
|
||||
}
|
||||
/* end background colors */
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
font-variant-ligatures: none;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(var(--color-background-100));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: rgba(var(--color-background-80));
|
||||
}
|
||||
|
||||
.hide-vertical-scrollbar::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.hide-horizontal-scrollbar::-webkit-scrollbar {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.hide-both-scrollbars::-webkit-scrollbar {
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers */
|
||||
.disable-autofill-style:-webkit-autofill,
|
||||
.disable-autofill-style:-webkit-autofill:hover,
|
||||
.disable-autofill-style:-webkit-autofill:focus,
|
||||
.disable-autofill-style:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.vertical-scrollbar,
|
||||
.horizontal-scrollbar {
|
||||
scrollbar-width: initial;
|
||||
scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
|
||||
}
|
||||
.vertical-scrollbar:hover,
|
||||
.horizontal-scrollbar:hover {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
|
||||
}
|
||||
.vertical-scrollbar:active,
|
||||
.horizontal-scrollbar:active {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar,
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-track,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(96, 100, 108, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(96, 100, 108, 0.25);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(96, 100, 108, 0.5);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:active,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(96, 100, 108, 0.7);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-corner,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
/* scrollbar sm size */
|
||||
.scrollbar-sm::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.scrollbar-sm::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar md size */
|
||||
.scrollbar-md::-webkit-scrollbar {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
.scrollbar-md::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar lg size */
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.scrollbar-lg::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -2,11 +2,6 @@ import type { Metadata, Viewport } from "next";
|
||||
|
||||
import { PreloadResources } from "./layout.preload";
|
||||
|
||||
// styles
|
||||
import "@/styles/power-k.css";
|
||||
import "@/styles/emoji.css";
|
||||
import "@plane/propel/styles/react-day-picker";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
robots: {
|
||||
index: false,
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { Metadata, Viewport } from "next";
|
||||
import Script from "next/script";
|
||||
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
import "@plane/tailwind-config/global.css";
|
||||
|
||||
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
|
||||
|
||||
|
||||
@@ -1,972 +0,0 @@
|
||||
@import "@plane/propel/styles/fonts";
|
||||
@import "@plane/editor/styles";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.text-1\.5xl {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
.text-2\.5xl {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.3s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-primary-10: 229, 243, 250;
|
||||
--color-primary-20: 216, 237, 248;
|
||||
--color-primary-30: 199, 229, 244;
|
||||
--color-primary-40: 169, 214, 239;
|
||||
--color-primary-50: 144, 202, 234;
|
||||
--color-primary-60: 109, 186, 227;
|
||||
--color-primary-70: 75, 170, 221;
|
||||
--color-primary-80: 41, 154, 214;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 0, 99, 153;
|
||||
--color-primary-200: 0, 92, 143;
|
||||
--color-primary-300: 0, 86, 133;
|
||||
--color-primary-400: 0, 77, 117;
|
||||
--color-primary-500: 0, 66, 102;
|
||||
--color-primary-600: 0, 53, 82;
|
||||
--color-primary-700: 0, 43, 66;
|
||||
--color-primary-800: 0, 33, 51;
|
||||
--color-primary-900: 0, 23, 36;
|
||||
|
||||
--color-error-10: 255 252 252;
|
||||
--color-error-20: 255 247 247;
|
||||
--color-error-30: 255, 219, 220;
|
||||
--color-error-100: 244 170 170;
|
||||
--color-error-200: 220 62 62;
|
||||
--color-error-500: 140 51 58;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
--color-background-primary: var(--color-primary-10);
|
||||
--color-background-error: var(--color-error-20);
|
||||
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-350: 130, 130, 130;
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-text-primary: var(--color-primary-100);
|
||||
--color-text-error: var(--color-error-200);
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
--color-border-primary: var(--color-primary-40);
|
||||
--color-border-error: var(--color-error-100);
|
||||
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.14);
|
||||
--color-shadow-xs:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 8px -1px rgba(16, 24, 40, 0.1);
|
||||
--color-shadow-sm:
|
||||
0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
|
||||
--color-shadow-rg:
|
||||
0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
|
||||
0px 1px 12px 0px rgba(16, 24, 40, 0.04);
|
||||
--color-shadow-md:
|
||||
0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-lg:
|
||||
0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 24px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
|
||||
0px 0px 52px 0px rgba(16, 24, 40, 0.16);
|
||||
--color-shadow-2xl:
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 32px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-3xl:
|
||||
0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 48px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
|
||||
--color-shadow-custom: 2px 2px 8px 2px rgba(234, 231, 250, 0.3);
|
||||
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
|
||||
--color-sidebar-shadow-2xs: var(--color-shadow-2xs);
|
||||
--color-sidebar-shadow-xs: var(--color-shadow-xs);
|
||||
--color-sidebar-shadow-sm: var(--color-shadow-sm);
|
||||
--color-sidebar-shadow-rg: var(--color-shadow-rg);
|
||||
--color-sidebar-shadow-md: var(--color-shadow-md);
|
||||
--color-sidebar-shadow-lg: var(--color-shadow-lg);
|
||||
--color-sidebar-shadow-xl: var(--color-shadow-xl);
|
||||
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
|
||||
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
|
||||
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
|
||||
/* Plane subscriptions */
|
||||
--color-subscription-free-200: 69, 80, 104;
|
||||
--color-subscription-free-400: 51, 59, 77;
|
||||
|
||||
--color-subscription-one-200: 101, 42, 14;
|
||||
--color-subscription-one-400: 90, 37, 12;
|
||||
|
||||
--color-subscription-pro-200: 32, 128, 138;
|
||||
--color-subscription-pro-400: 24, 96, 104;
|
||||
|
||||
--color-subscription-business-200: 142, 33, 87;
|
||||
--color-subscription-business-400: 103, 24, 63;
|
||||
|
||||
--color-subscription-enterprise-200: 86, 5, 145;
|
||||
--color-subscription-enterprise-400: 73, 4, 123;
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="light-contrast"] {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
|
||||
/* Plane subscriptions */
|
||||
--color-subscription-free-200: 69, 80, 104;
|
||||
--color-subscription-free-400: 51, 59, 77;
|
||||
|
||||
--color-subscription-one-200: 101, 42, 14;
|
||||
--color-subscription-one-400: 90, 37, 12;
|
||||
|
||||
--color-subscription-pro-200: 32, 128, 138;
|
||||
--color-subscription-pro-400: 24, 96, 104;
|
||||
|
||||
--color-subscription-business-200: 142, 33, 87;
|
||||
--color-subscription-business-400: 103, 24, 63;
|
||||
|
||||
--color-subscription-enterprise-200: 86, 5, 145;
|
||||
--color-subscription-enterprise-400: 73, 4, 123;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-350: 130, 130, 130;
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
|
||||
--gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
|
||||
--color-onboarding-text-100: 23, 23, 23;
|
||||
--color-onboarding-text-200: 58, 58, 58;
|
||||
--color-onboarding-text-300: 82, 82, 82;
|
||||
--color-onboarding-text-400: 163, 163, 163;
|
||||
|
||||
--color-onboarding-background-100: 236, 241, 255;
|
||||
--color-onboarding-background-200: 255, 255, 255;
|
||||
--color-onboarding-background-300: 236, 241, 255;
|
||||
--color-onboarding-background-400: 177, 206, 250;
|
||||
|
||||
--color-onboarding-border-100: 229, 229, 229;
|
||||
--color-onboarding-border-200: 217, 228, 255;
|
||||
--color-onboarding-border-300: 229, 229, 229, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 62, 155, 79;
|
||||
--color-toast-error-text: var(--color-error-200);
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 51, 88, 212;
|
||||
--color-toast-loading-text: 28, 32, 36;
|
||||
--color-toast-secondary-text: 128, 131, 141;
|
||||
--color-toast-tertiary-text: 96, 100, 108;
|
||||
|
||||
--color-toast-success-background: 253, 253, 254;
|
||||
--color-toast-error-background: var(--color-error-10);
|
||||
--color-toast-warning-background: 254, 253, 251;
|
||||
--color-toast-info-background: 253, 253, 254;
|
||||
--color-toast-loading-background: 253, 253, 254;
|
||||
|
||||
--color-toast-success-border: 218, 241, 219;
|
||||
--color-toast-error-border: var(--color-error-30);
|
||||
--color-toast-warning-border: 255, 247, 194;
|
||||
--color-toast-info-border: 210, 222, 255;
|
||||
--color-toast-loading-border: 224, 225, 230;
|
||||
}
|
||||
|
||||
[data-theme="light-contrast"] {
|
||||
--color-text-100: 11, 11, 11; /* primary text */
|
||||
--color-text-200: 38, 38, 38; /* secondary text */
|
||||
--color-text-300: 58, 58, 58; /* tertiary text */
|
||||
--color-text-350: 80, 80, 80;
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark-contrast"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-primary-10: 8, 31, 43;
|
||||
--color-primary-20: 10, 37, 51;
|
||||
--color-primary-30: 13, 49, 69;
|
||||
--color-primary-40: 16, 58, 81;
|
||||
--color-primary-50: 18, 68, 94;
|
||||
--color-primary-60: 23, 86, 120;
|
||||
--color-primary-70: 28, 104, 146;
|
||||
--color-primary-80: 31, 116, 163;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 40, 146, 204;
|
||||
--color-primary-200: 41, 154, 214;
|
||||
--color-primary-300: 75, 170, 221;
|
||||
--color-primary-400: 109, 186, 227;
|
||||
--color-primary-500: 144, 202, 234;
|
||||
--color-primary-600: 169, 214, 239;
|
||||
--color-primary-700: 199, 229, 244;
|
||||
--color-primary-800: 216, 237, 248;
|
||||
--color-primary-900: 229, 243, 250;
|
||||
|
||||
--color-background-100: 25, 25, 25; /* primary bg */
|
||||
--color-background-90: 32, 32, 32; /* secondary bg */
|
||||
--color-background-80: 44, 44, 44; /* tertiary bg */
|
||||
|
||||
--color-background-primary: var(--color-background-90);
|
||||
--color-background-error: var(--color-background-90);
|
||||
|
||||
--color-text-primary: var(--color-primary-40);
|
||||
--color-text-error: var(--color-error-100);
|
||||
|
||||
--color-border-primary: var(--color-primary-200);
|
||||
--color-border-error: var(--color-error-500);
|
||||
|
||||
--color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
|
||||
/* Plane subscriptions */
|
||||
--color-subscription-free-200: 206, 213, 232;
|
||||
--color-subscription-free-400: 152, 166, 206;
|
||||
|
||||
--color-subscription-one-200: 255, 148, 153;
|
||||
--color-subscription-one-400: 200, 118, 121;
|
||||
|
||||
--color-subscription-pro-200: 12, 170, 192;
|
||||
--color-subscription-pro-400: 9, 130, 154;
|
||||
|
||||
--color-subscription-business-200: 206, 34, 119;
|
||||
--color-subscription-business-400: 140, 23, 81;
|
||||
|
||||
--color-subscription-enterprise-200: 182, 71, 255;
|
||||
--color-subscription-enterprise-400: 134, 11, 203;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-text-100: 229, 229, 229; /* primary text */
|
||||
--color-text-200: 163, 163, 163; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-350: 130, 130, 130;
|
||||
--color-text-400: 82, 82, 82; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 82, 82, 82; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
|
||||
|
||||
--color-onboarding-text-100: 237, 238, 240;
|
||||
--color-onboarding-text-200: 176, 180, 187;
|
||||
--color-onboarding-text-300: 118, 123, 132;
|
||||
--color-onboarding-text-400: 105, 110, 119;
|
||||
|
||||
--color-onboarding-background-100: 54, 58, 64;
|
||||
--color-onboarding-background-200: 40, 42, 45;
|
||||
--color-onboarding-background-300: 40, 42, 45;
|
||||
--color-onboarding-background-400: 67, 72, 79;
|
||||
|
||||
--color-onboarding-border-100: 54, 58, 64;
|
||||
--color-onboarding-border-200: 54, 58, 64;
|
||||
--color-onboarding-border-300: 34, 35, 38, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-text-100: 250, 250, 250; /* primary text */
|
||||
--color-text-200: 241, 241, 241; /* secondary text */
|
||||
--color-text-300: 212, 212, 212; /* tertiary text */
|
||||
--color-text-350: 190, 190, 190 --color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="dark"],
|
||||
[data-theme="light-contrast"],
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
|
||||
/* stickies and editor colors */
|
||||
:root {
|
||||
/* text colors */
|
||||
--editor-colors-gray-text: #5c5e63;
|
||||
--editor-colors-peach-text: #ff5b59;
|
||||
--editor-colors-pink-text: #f65385;
|
||||
--editor-colors-orange-text: #fd9038;
|
||||
--editor-colors-green-text: #0fc27b;
|
||||
--editor-colors-light-blue-text: #17bee9;
|
||||
--editor-colors-dark-blue-text: #266df0;
|
||||
--editor-colors-purple-text: #9162f9;
|
||||
/* end text colors */
|
||||
|
||||
/* background colors */
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
/* end background colors */
|
||||
}
|
||||
/* background colors */
|
||||
[data-theme*="light"] {
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
}
|
||||
[data-theme*="dark"] {
|
||||
--editor-colors-gray-background: #404144;
|
||||
--editor-colors-peach-background: #593032;
|
||||
--editor-colors-pink-background: #562e3d;
|
||||
--editor-colors-orange-background: #583e2a;
|
||||
--editor-colors-green-background: #1d4a3b;
|
||||
--editor-colors-light-blue-background: #1f495c;
|
||||
--editor-colors-dark-blue-background: #223558;
|
||||
--editor-colors-purple-background: #3d325a;
|
||||
}
|
||||
/* end background colors */
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
font-variant-ligatures: none;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
/* scrollbar style */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tags-input-container {
|
||||
border: 2px solid #000;
|
||||
padding: 0.5em;
|
||||
border-radius: 3px;
|
||||
width: min(80vw, 600px);
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: rgb(218, 216, 216);
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.75em;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.tag-item .close {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: rgb(48, 48, 48);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0.5em;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
flex-grow: 1;
|
||||
padding: 0.5em 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* emoji icon picker */
|
||||
.conical-gradient {
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#ff6b00 0deg,
|
||||
#f7ae59 70.5deg,
|
||||
#3f76ff 151.12deg,
|
||||
#05c3ff 213deg,
|
||||
#18914f 289.87deg,
|
||||
#f6f172 329.25deg,
|
||||
#ff6b00 360deg
|
||||
);
|
||||
}
|
||||
|
||||
/* progress bar */
|
||||
.progress-bar {
|
||||
fill: currentColor;
|
||||
color: rgba(var(--color-sidebar-background-100));
|
||||
}
|
||||
|
||||
/* lineclamp */
|
||||
.lineclamp {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
}
|
||||
|
||||
/* popover2 styling */
|
||||
.bp4-popover2-transition-container {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder,
|
||||
::placeholder,
|
||||
:-ms-input-placeholder {
|
||||
color: rgb(var(--color-text-400));
|
||||
}
|
||||
|
||||
.bp4-overlay-content {
|
||||
z-index: 555 !important;
|
||||
}
|
||||
|
||||
.disable-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
-ms-writing-mode: vertical-lr;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
div.web-view-spinner {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: inline-block;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.web-view-spinner div {
|
||||
width: 6%;
|
||||
height: 16%;
|
||||
background: rgb(var(--color-text-400));
|
||||
position: absolute;
|
||||
left: 49%;
|
||||
top: 43%;
|
||||
opacity: 0;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
animation: fade 1s linear infinite;
|
||||
-webkit-animation: fade 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar1 {
|
||||
transform: rotate(0deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(0deg) translate(0, -130%);
|
||||
animation-delay: 0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar2 {
|
||||
transform: rotate(30deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(30deg) translate(0, -130%);
|
||||
animation-delay: -0.9167s;
|
||||
-webkit-animation-delay: -0.9167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar3 {
|
||||
transform: rotate(60deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(60deg) translate(0, -130%);
|
||||
animation-delay: -0.833s;
|
||||
-webkit-animation-delay: -0.833s;
|
||||
}
|
||||
div.web-view-spinner div.bar4 {
|
||||
transform: rotate(90deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(90deg) translate(0, -130%);
|
||||
animation-delay: -0.7497s;
|
||||
-webkit-animation-delay: -0.7497s;
|
||||
}
|
||||
div.web-view-spinner div.bar5 {
|
||||
transform: rotate(120deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(120deg) translate(0, -130%);
|
||||
animation-delay: -0.667s;
|
||||
-webkit-animation-delay: -0.667s;
|
||||
}
|
||||
div.web-view-spinner div.bar6 {
|
||||
transform: rotate(150deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(150deg) translate(0, -130%);
|
||||
animation-delay: -0.5837s;
|
||||
-webkit-animation-delay: -0.5837s;
|
||||
}
|
||||
div.web-view-spinner div.bar7 {
|
||||
transform: rotate(180deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(180deg) translate(0, -130%);
|
||||
animation-delay: -0.5s;
|
||||
-webkit-animation-delay: -0.5s;
|
||||
}
|
||||
div.web-view-spinner div.bar8 {
|
||||
transform: rotate(210deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(210deg) translate(0, -130%);
|
||||
animation-delay: -0.4167s;
|
||||
-webkit-animation-delay: -0.4167s;
|
||||
}
|
||||
div.web-view-spinner div.bar9 {
|
||||
transform: rotate(240deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(240deg) translate(0, -130%);
|
||||
animation-delay: -0.333s;
|
||||
-webkit-animation-delay: -0.333s;
|
||||
}
|
||||
div.web-view-spinner div.bar10 {
|
||||
transform: rotate(270deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(270deg) translate(0, -130%);
|
||||
animation-delay: -0.2497s;
|
||||
-webkit-animation-delay: -0.2497s;
|
||||
}
|
||||
div.web-view-spinner div.bar11 {
|
||||
transform: rotate(300deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(300deg) translate(0, -130%);
|
||||
animation-delay: -0.167s;
|
||||
-webkit-animation-delay: -0.167s;
|
||||
}
|
||||
div.web-view-spinner div.bar12 {
|
||||
transform: rotate(330deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(330deg) translate(0, -130%);
|
||||
animation-delay: -0.0833s;
|
||||
-webkit-animation-delay: -0.0833s;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.vertical-scrollbar,
|
||||
.horizontal-scrollbar {
|
||||
scrollbar-width: initial;
|
||||
scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
|
||||
}
|
||||
.vertical-scrollbar:hover,
|
||||
.horizontal-scrollbar:hover {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
|
||||
}
|
||||
.vertical-scrollbar:active,
|
||||
.horizontal-scrollbar:active {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar,
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-track,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(96, 100, 108, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(96, 100, 108, 0.25);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(96, 100, 108, 0.5);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:active,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(96, 100, 108, 0.7);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-corner,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
/* scrollbar xs size */
|
||||
.scrollbar-xs::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
.scrollbar-xs::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.shadow-custom {
|
||||
box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
|
||||
}
|
||||
/* backdrop filter */
|
||||
.backdrop-blur-custom {
|
||||
@apply backdrop-filter blur-[9px];
|
||||
}
|
||||
|
||||
/* scrollbar sm size */
|
||||
.scrollbar-sm::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.scrollbar-sm::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar md size */
|
||||
.scrollbar-md::-webkit-scrollbar {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
.scrollbar-md::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar lg size */
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.scrollbar-lg::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* highlight class */
|
||||
.highlight {
|
||||
border: 1px solid rgb(var(--color-primary-100)) !important;
|
||||
}
|
||||
.highlight-with-line {
|
||||
border-left: 5px solid rgb(var(--color-primary-100)) !important;
|
||||
background: rgb(var(--color-background-80));
|
||||
}
|
||||
|
||||
/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers */
|
||||
.disable-autofill-style:-webkit-autofill,
|
||||
.disable-autofill-style:-webkit-autofill:hover,
|
||||
.disable-autofill-style:-webkit-autofill:focus,
|
||||
.disable-autofill-style:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.epr-search-container > input {
|
||||
background-color: rgb(var(--color-background-90)) !important;
|
||||
color: rgb(var(--color-text-100)) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.epr-search-container > input::placeholder {
|
||||
color: rgb(var(--color-text-400)) !important;
|
||||
}
|
||||
|
||||
.epr-search-container > .epr-icn-search {
|
||||
color: rgb(var(--color-text-400)) !important;
|
||||
}
|
||||
|
||||
/* Lock icon animations */
|
||||
@keyframes textSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
max-width: 0px;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
max-width: 60px;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
max-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lockIconAnimation {
|
||||
0% {
|
||||
transform: rotate(-5deg) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(0deg) scale(1.15);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg) scale(1.08);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unlockIconAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-8deg) scale(1.15);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(3deg) scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-text-slide-in {
|
||||
animation: textSlideIn 400ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-text-fade-out {
|
||||
animation: textFadeOut 600ms ease-in 300ms forwards;
|
||||
}
|
||||
|
||||
.animate-lock-icon {
|
||||
animation: lockIconAnimation 600ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-unlock-icon {
|
||||
animation: unlockIconAnimation 600ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
animation: fadeOut 500ms ease-in 100ms forwards;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
0% {
|
||||
background-color: rgba(var(--color-background-90), 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Animation keyframes configuration for Tailwind CSS
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
// Toast notification animations
|
||||
leftToaster: {
|
||||
"0%": { left: "-20rem" },
|
||||
"100%": { left: "0" },
|
||||
},
|
||||
rightToaster: {
|
||||
"0%": { right: "-20rem" },
|
||||
"100%": { right: "0" },
|
||||
},
|
||||
|
||||
// Progress bar animation
|
||||
"bar-loader": {
|
||||
from: { left: "-100%" },
|
||||
to: { left: "100%" },
|
||||
},
|
||||
|
||||
// Web app specific animations
|
||||
"slide-up": {
|
||||
from: {
|
||||
transform: "translateY(10px)",
|
||||
opacity: "0",
|
||||
},
|
||||
to: {
|
||||
transform: "translateY(0)",
|
||||
opacity: "1",
|
||||
},
|
||||
},
|
||||
slideInFromBottom: {
|
||||
"0%": {
|
||||
transform: "translateY(100%)",
|
||||
opacity: "0",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(0)",
|
||||
opacity: "1",
|
||||
},
|
||||
},
|
||||
slideInFromTop: {
|
||||
"0%": {
|
||||
transform: "translateY(-100%)",
|
||||
opacity: "0",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(0)",
|
||||
opacity: "1",
|
||||
},
|
||||
},
|
||||
slideOut: {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
opacity: "1",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-100%)",
|
||||
opacity: "0",
|
||||
},
|
||||
},
|
||||
slideOutDown: {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
opacity: "1",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(100%)",
|
||||
opacity: "0",
|
||||
},
|
||||
},
|
||||
fadeOut: {
|
||||
"0%": {
|
||||
opacity: "1",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "0",
|
||||
},
|
||||
},
|
||||
|
||||
// Lock icon animations
|
||||
textSlideIn: {
|
||||
"0%": {
|
||||
opacity: "0",
|
||||
transform: "translateX(-8px)",
|
||||
maxWidth: "0px",
|
||||
},
|
||||
"40%": {
|
||||
opacity: "0.7",
|
||||
maxWidth: "60px",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "1",
|
||||
transform: "translateX(0)",
|
||||
maxWidth: "60px",
|
||||
},
|
||||
},
|
||||
textFadeOut: {
|
||||
"0%": {
|
||||
opacity: "1",
|
||||
transform: "translateX(0)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "0",
|
||||
transform: "translateX(8px)",
|
||||
},
|
||||
},
|
||||
lockIconAnimation: {
|
||||
"0%": {
|
||||
transform: "rotate(-5deg) scale(1)",
|
||||
},
|
||||
"25%": {
|
||||
transform: "rotate(0deg) scale(1.15)",
|
||||
},
|
||||
"50%": {
|
||||
transform: "rotate(5deg) scale(1.08)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "rotate(0deg) scale(1)",
|
||||
},
|
||||
},
|
||||
unlockIconAnimation: {
|
||||
"0%": {
|
||||
transform: "rotate(0deg) scale(1)",
|
||||
},
|
||||
"40%": {
|
||||
transform: "rotate(-8deg) scale(1.15)",
|
||||
},
|
||||
"80%": {
|
||||
transform: "rotate(3deg) scale(1.05)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "rotate(0deg) scale(1)",
|
||||
},
|
||||
},
|
||||
highlight: {
|
||||
"0%": {
|
||||
backgroundColor: "rgba(var(--color-background-90), 1)",
|
||||
borderRadius: "4px",
|
||||
},
|
||||
"100%": {
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: "4px",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* Color system configuration for Tailwind CSS
|
||||
* Includes custom colors, sidebar colors, toast colors, and subscription colors
|
||||
*/
|
||||
|
||||
const { convertToRGB, convertToRGBA } = require("./utils");
|
||||
|
||||
module.exports = {
|
||||
custom: {
|
||||
// Primary brand colors (0-1000 scale)
|
||||
primary: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-primary-10"),
|
||||
20: convertToRGB("--color-primary-20"),
|
||||
30: convertToRGB("--color-primary-30"),
|
||||
40: convertToRGB("--color-primary-40"),
|
||||
50: convertToRGB("--color-primary-50"),
|
||||
60: convertToRGB("--color-primary-60"),
|
||||
70: convertToRGB("--color-primary-70"),
|
||||
80: convertToRGB("--color-primary-80"),
|
||||
90: convertToRGB("--color-primary-90"),
|
||||
100: convertToRGB("--color-primary-100"),
|
||||
200: convertToRGB("--color-primary-200"),
|
||||
300: convertToRGB("--color-primary-300"),
|
||||
400: convertToRGB("--color-primary-400"),
|
||||
500: convertToRGB("--color-primary-500"),
|
||||
600: convertToRGB("--color-primary-600"),
|
||||
700: convertToRGB("--color-primary-700"),
|
||||
800: convertToRGB("--color-primary-800"),
|
||||
900: convertToRGB("--color-primary-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-primary-100"),
|
||||
},
|
||||
|
||||
// Background colors
|
||||
background: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-background-10"),
|
||||
20: convertToRGB("--color-background-20"),
|
||||
30: convertToRGB("--color-background-30"),
|
||||
40: convertToRGB("--color-background-40"),
|
||||
50: convertToRGB("--color-background-50"),
|
||||
60: convertToRGB("--color-background-60"),
|
||||
70: convertToRGB("--color-background-70"),
|
||||
80: convertToRGB("--color-background-80"),
|
||||
90: convertToRGB("--color-background-90"),
|
||||
100: convertToRGB("--color-background-100"),
|
||||
200: convertToRGB("--color-background-200"),
|
||||
300: convertToRGB("--color-background-300"),
|
||||
400: convertToRGB("--color-background-400"),
|
||||
500: convertToRGB("--color-background-500"),
|
||||
600: convertToRGB("--color-background-600"),
|
||||
700: convertToRGB("--color-background-700"),
|
||||
800: convertToRGB("--color-background-800"),
|
||||
900: convertToRGB("--color-background-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
overlay: convertToRGBA("--color-background-80", 0.95),
|
||||
primary: convertToRGB("--color-background-primary"),
|
||||
error: convertToRGB("--color-background-error"),
|
||||
DEFAULT: convertToRGB("--color-background-100"),
|
||||
},
|
||||
|
||||
// Text colors
|
||||
text: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-text-10"),
|
||||
20: convertToRGB("--color-text-20"),
|
||||
30: convertToRGB("--color-text-30"),
|
||||
40: convertToRGB("--color-text-40"),
|
||||
50: convertToRGB("--color-text-50"),
|
||||
60: convertToRGB("--color-text-60"),
|
||||
70: convertToRGB("--color-text-70"),
|
||||
80: convertToRGB("--color-text-80"),
|
||||
90: convertToRGB("--color-text-90"),
|
||||
100: convertToRGB("--color-text-100"),
|
||||
200: convertToRGB("--color-text-200"),
|
||||
300: convertToRGB("--color-text-300"),
|
||||
350: convertToRGB("--color-text-350"),
|
||||
400: convertToRGB("--color-text-400"),
|
||||
500: convertToRGB("--color-text-500"),
|
||||
600: convertToRGB("--color-text-600"),
|
||||
700: convertToRGB("--color-text-700"),
|
||||
800: convertToRGB("--color-text-800"),
|
||||
900: convertToRGB("--color-text-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
primary: convertToRGB("--color-text-primary"),
|
||||
error: convertToRGB("--color-text-error"),
|
||||
DEFAULT: convertToRGB("--color-text-100"),
|
||||
},
|
||||
|
||||
// Border colors
|
||||
border: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
100: convertToRGB("--color-border-100"),
|
||||
200: convertToRGB("--color-border-200"),
|
||||
300: convertToRGB("--color-border-300"),
|
||||
400: convertToRGB("--color-border-400"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
primary: convertToRGB("--color-border-primary"),
|
||||
error: convertToRGB("--color-border-error"),
|
||||
DEFAULT: convertToRGB("--color-border-200"),
|
||||
},
|
||||
|
||||
// Error state colors
|
||||
error: {
|
||||
10: convertToRGB("--color-error-10"),
|
||||
20: convertToRGB("--color-error-20"),
|
||||
30: convertToRGB("--color-error-30"),
|
||||
100: convertToRGB("--color-error-100"),
|
||||
200: convertToRGB("--color-error-200"),
|
||||
500: convertToRGB("--color-error-500"),
|
||||
},
|
||||
|
||||
// Sidebar-specific colors
|
||||
sidebar: {
|
||||
background: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-sidebar-background-10"),
|
||||
20: convertToRGB("--color-sidebar-background-20"),
|
||||
30: convertToRGB("--color-sidebar-background-30"),
|
||||
40: convertToRGB("--color-sidebar-background-40"),
|
||||
50: convertToRGB("--color-sidebar-background-50"),
|
||||
60: convertToRGB("--color-sidebar-background-60"),
|
||||
70: convertToRGB("--color-sidebar-background-70"),
|
||||
80: convertToRGB("--color-sidebar-background-80"),
|
||||
90: convertToRGB("--color-sidebar-background-90"),
|
||||
100: convertToRGB("--color-sidebar-background-100"),
|
||||
200: convertToRGB("--color-sidebar-background-200"),
|
||||
300: convertToRGB("--color-sidebar-background-300"),
|
||||
400: convertToRGB("--color-sidebar-background-400"),
|
||||
500: convertToRGB("--color-sidebar-background-500"),
|
||||
600: convertToRGB("--color-sidebar-background-600"),
|
||||
700: convertToRGB("--color-sidebar-background-700"),
|
||||
800: convertToRGB("--color-sidebar-background-800"),
|
||||
900: convertToRGB("--color-sidebar-background-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-background-100"),
|
||||
},
|
||||
text: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-sidebar-text-10"),
|
||||
20: convertToRGB("--color-sidebar-text-20"),
|
||||
30: convertToRGB("--color-sidebar-text-30"),
|
||||
40: convertToRGB("--color-sidebar-text-40"),
|
||||
50: convertToRGB("--color-sidebar-text-50"),
|
||||
60: convertToRGB("--color-sidebar-text-60"),
|
||||
70: convertToRGB("--color-sidebar-text-70"),
|
||||
80: convertToRGB("--color-sidebar-text-80"),
|
||||
90: convertToRGB("--color-sidebar-text-90"),
|
||||
100: convertToRGB("--color-sidebar-text-100"),
|
||||
200: convertToRGB("--color-sidebar-text-200"),
|
||||
300: convertToRGB("--color-sidebar-text-300"),
|
||||
400: convertToRGB("--color-sidebar-text-400"),
|
||||
500: convertToRGB("--color-sidebar-text-500"),
|
||||
600: convertToRGB("--color-sidebar-text-600"),
|
||||
700: convertToRGB("--color-sidebar-text-700"),
|
||||
800: convertToRGB("--color-sidebar-text-800"),
|
||||
900: convertToRGB("--color-sidebar-text-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-text-100"),
|
||||
},
|
||||
border: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
100: convertToRGB("--color-sidebar-border-100"),
|
||||
200: convertToRGB("--color-sidebar-border-200"),
|
||||
300: convertToRGB("--color-sidebar-border-300"),
|
||||
400: convertToRGB("--color-sidebar-border-400"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-border-200"),
|
||||
},
|
||||
},
|
||||
|
||||
// UI utility colors
|
||||
backdrop: "rgba(0, 0, 0, 0.25)",
|
||||
scrollbar: {
|
||||
neutral: "rgba(96, 100, 108, 0.1)",
|
||||
hover: "rgba(96, 100, 108, 0.25)",
|
||||
active: "rgba(96, 100, 108, 0.7)",
|
||||
},
|
||||
|
||||
// Subscription tier colors
|
||||
subscription: {
|
||||
free: {
|
||||
200: convertToRGB("--color-subscription-free-200"),
|
||||
400: convertToRGB("--color-subscription-free-400"),
|
||||
},
|
||||
one: {
|
||||
200: convertToRGB("--color-subscription-one-200"),
|
||||
400: convertToRGB("--color-subscription-one-400"),
|
||||
},
|
||||
pro: {
|
||||
200: convertToRGB("--color-subscription-pro-200"),
|
||||
400: convertToRGB("--color-subscription-pro-400"),
|
||||
},
|
||||
business: {
|
||||
200: convertToRGB("--color-subscription-business-200"),
|
||||
400: convertToRGB("--color-subscription-business-400"),
|
||||
},
|
||||
enterprise: {
|
||||
200: convertToRGB("--color-subscription-enterprise-200"),
|
||||
400: convertToRGB("--color-subscription-enterprise-400"),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Toast notification colors
|
||||
toast: {
|
||||
text: {
|
||||
success: convertToRGB("--color-toast-success-text"),
|
||||
error: convertToRGB("--color-toast-error-text"),
|
||||
warning: convertToRGB("--color-toast-warning-text"),
|
||||
info: convertToRGB("--color-toast-info-text"),
|
||||
loading: convertToRGB("--color-toast-loading-text"),
|
||||
secondary: convertToRGB("--color-toast-secondary-text"),
|
||||
tertiary: convertToRGB("--color-toast-tertiary-text"),
|
||||
},
|
||||
background: {
|
||||
success: convertToRGB("--color-toast-success-background"),
|
||||
error: convertToRGB("--color-toast-error-background"),
|
||||
warning: convertToRGB("--color-toast-warning-background"),
|
||||
info: convertToRGB("--color-toast-info-background"),
|
||||
loading: convertToRGB("--color-toast-loading-background"),
|
||||
},
|
||||
border: {
|
||||
success: convertToRGB("--color-toast-success-border"),
|
||||
error: convertToRGB("--color-toast-error-border"),
|
||||
warning: convertToRGB("--color-toast-warning-border"),
|
||||
info: convertToRGB("--color-toast-info-border"),
|
||||
loading: convertToRGB("--color-toast-loading-border"),
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Content paths configuration for Tailwind CSS
|
||||
* Defines which files Tailwind should scan for class names
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
relative: false,
|
||||
files: [
|
||||
// App directories
|
||||
"./app/**/*.{js,ts,jsx,tsx}",
|
||||
"./core/**/*.{js,ts,jsx,tsx}",
|
||||
"./ce/**/*.{js,ts,jsx,tsx}",
|
||||
"./ee/**/*.{js,ts,jsx,tsx}",
|
||||
|
||||
// Component directories
|
||||
"./components/**/*.tsx",
|
||||
"./constants/**/*.{js,ts,jsx,tsx}",
|
||||
"./layouts/**/*.tsx",
|
||||
"./pages/**/*.tsx",
|
||||
"./ui/**/*.tsx",
|
||||
|
||||
// Shared packages
|
||||
"../../packages/ui/src/**/*.{js,ts,jsx,tsx}",
|
||||
"../../packages/propel/src/**/*.{js,ts,jsx,tsx}",
|
||||
"../../packages/editor/src/**/*.{js,ts,jsx,tsx}",
|
||||
|
||||
// Exclude Storybook files
|
||||
"!../../packages/ui/**/*.stories{js,ts,jsx,tsx}",
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Layout utilities configuration for Tailwind CSS
|
||||
* Includes z-index hierarchy, breakpoints, and custom heights
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
// Z-index layering system
|
||||
zIndex: {
|
||||
base: 0 /* default content */,
|
||||
header: 10 /* sticky headers, navbars */,
|
||||
sidebar: 20 /* sidebars, drawers */,
|
||||
dropdown: 30 /* dropdowns, select menus */,
|
||||
popover: 40 /* popovers, hovercards */,
|
||||
tooltip: 50 /* tooltips, hints */,
|
||||
sticky: 60 /* sticky UI */,
|
||||
backdrop: 90 /* backdrop / overlay */,
|
||||
modal: 100 /* dialogs, modals */,
|
||||
toast: 110 /* toast, alerts */,
|
||||
loader: 120 /* blocking loader/spinner */,
|
||||
max: 9999 /* emergency override (rare use) */,
|
||||
},
|
||||
|
||||
// Custom screen breakpoints
|
||||
screens: {
|
||||
"3xl": "1792px",
|
||||
},
|
||||
|
||||
// Custom heights
|
||||
height: {
|
||||
header: "3.25rem",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Tailwind CSS plugins configuration
|
||||
* Includes external plugins and custom utility classes
|
||||
*/
|
||||
|
||||
module.exports = [
|
||||
// External plugins
|
||||
require("tailwindcss-animate"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("@tailwindcss/container-queries"),
|
||||
|
||||
// Custom utilities plugin
|
||||
function ({ addUtilities }) {
|
||||
const newUtilities = {
|
||||
// Responsive horizontal padding for pages
|
||||
// Mobile screens
|
||||
".px-page-x": {
|
||||
paddingLeft: "1.25rem",
|
||||
paddingRight: "1.25rem",
|
||||
},
|
||||
// Medium screens (768px and up)
|
||||
"@media (min-width: 768px)": {
|
||||
".px-page-x": {
|
||||
paddingLeft: "1.35rem",
|
||||
paddingRight: "1.35rem",
|
||||
},
|
||||
},
|
||||
|
||||
// Hide scrollbar but keep functionality
|
||||
".scrollbar-hide": {
|
||||
"-ms-overflow-style": "none" /* IE and Edge */,
|
||||
"scrollbar-width": "none" /* Firefox */,
|
||||
"&::-webkit-scrollbar": {
|
||||
display: "none" /* Chrome, Safari and Opera */,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
addUtilities(newUtilities, ["responsive"]);
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Box shadow configuration for Tailwind CSS
|
||||
* Includes custom shadows and sidebar-specific shadows
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
// Standard shadow scale (2xs to 4xl)
|
||||
"custom-shadow": "var(--color-shadow-custom)",
|
||||
"custom-shadow-2xs": "var(--color-shadow-2xs)",
|
||||
"custom-shadow-xs": "var(--color-shadow-xs)",
|
||||
"custom-shadow-sm": "var(--color-shadow-sm)",
|
||||
"custom-shadow-rg": "var(--color-shadow-rg)",
|
||||
"custom-shadow-md": "var(--color-shadow-md)",
|
||||
"custom-shadow-lg": "var(--color-shadow-lg)",
|
||||
"custom-shadow-xl": "var(--color-shadow-xl)",
|
||||
"custom-shadow-2xl": "var(--color-shadow-2xl)",
|
||||
"custom-shadow-3xl": "var(--color-shadow-3xl)",
|
||||
"custom-shadow-4xl": "var(--color-shadow-4xl)",
|
||||
|
||||
// Sidebar-specific shadows
|
||||
"custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
|
||||
"custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
|
||||
"custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
|
||||
"custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
|
||||
"custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
|
||||
"custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
|
||||
"custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
|
||||
"custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
|
||||
"custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
|
||||
"custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Spacing configuration for Tailwind CSS
|
||||
* All values are scaled down to 90% of default Tailwind spacing
|
||||
* Used by: padding, margin, space, gap
|
||||
*/
|
||||
|
||||
// Base spacing scale (90% of Tailwind defaults)
|
||||
const spacingScale = {
|
||||
0: "0",
|
||||
0.5: "0.1125rem",
|
||||
1: "0.225rem",
|
||||
1.5: "0.3375rem",
|
||||
2: "0.45rem",
|
||||
2.5: "0.5625rem",
|
||||
3: "0.675rem",
|
||||
3.5: "0.7875rem",
|
||||
4: "0.9rem",
|
||||
5: "1.125rem",
|
||||
6: "1.35rem",
|
||||
7: "1.575rem",
|
||||
8: "1.8rem",
|
||||
9: "2.025rem",
|
||||
10: "2.25rem",
|
||||
11: "2.475rem",
|
||||
12: "2.7rem",
|
||||
16: "3.6rem",
|
||||
20: "4.5rem",
|
||||
24: "5.4rem",
|
||||
32: "7.2rem",
|
||||
40: "9rem",
|
||||
48: "10.8rem",
|
||||
56: "12.6rem",
|
||||
64: "14.4rem",
|
||||
72: "16.2rem",
|
||||
80: "18rem",
|
||||
96: "21.6rem",
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
// Padding with custom page utilities
|
||||
padding: {
|
||||
...spacingScale,
|
||||
"page-x": "1.35rem",
|
||||
"page-y": "1.35rem",
|
||||
},
|
||||
|
||||
// Margin (same scale as padding)
|
||||
margin: spacingScale,
|
||||
|
||||
// Gap (same scale as padding)
|
||||
gap: spacingScale,
|
||||
|
||||
// Space (same scale as padding)
|
||||
space: spacingScale,
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Typography configuration for Tailwind CSS
|
||||
* Includes font sizes (90% scaled), font families, and prose styles
|
||||
*/
|
||||
|
||||
const { convertToRGB } = require("./utils");
|
||||
|
||||
module.exports = {
|
||||
// Font sizes scaled down to 90% of default
|
||||
fontSize: {
|
||||
"2xs": "0.5625rem",
|
||||
xs: "0.675rem",
|
||||
sm: "0.7875rem",
|
||||
base: "0.9rem",
|
||||
lg: "1.0125rem",
|
||||
xl: "1.125rem",
|
||||
"2xl": "1.35rem",
|
||||
"3xl": "1.6875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "2.7rem",
|
||||
"6xl": "3.375rem",
|
||||
"7xl": "4.05rem",
|
||||
"8xl": "5.4rem",
|
||||
"9xl": "7.2rem",
|
||||
},
|
||||
|
||||
// Font family
|
||||
fontFamily: {
|
||||
custom: ["Inter", "sans-serif"],
|
||||
},
|
||||
|
||||
// Prose/Typography plugin configuration
|
||||
typography: () => ({
|
||||
brand: {
|
||||
css: {
|
||||
"--tw-prose-body": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-p": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-headings": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-lead": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-links": convertToRGB("--color-primary-100"),
|
||||
"--tw-prose-bold": "inherit",
|
||||
"--tw-prose-counters": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-bullets": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-hr": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-quotes": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-quote-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-code": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-pre-code": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-pre-bg": convertToRGB("--color-background-100"),
|
||||
"--tw-prose-th-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-td-borders": convertToRGB("--color-border-200"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Helper functions for Tailwind CSS configuration
|
||||
*/
|
||||
|
||||
/**
|
||||
* Converts a CSS variable name to RGB format
|
||||
* @param {string} variableName - CSS variable name (e.g., "--color-primary-100")
|
||||
* @returns {string} RGBA color string
|
||||
*/
|
||||
const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
|
||||
|
||||
/**
|
||||
* Converts a CSS variable name to RGBA format with custom alpha
|
||||
* @param {string} variableName - CSS variable name (e.g., "--color-background-80")
|
||||
* @param {number} alpha - Alpha value (0-1)
|
||||
* @returns {string} RGBA color string with alpha
|
||||
*/
|
||||
const convertToRGBA = (variableName, alpha) =>
|
||||
`rgba(var(${variableName}), ${alpha})`;
|
||||
|
||||
module.exports = {
|
||||
convertToRGB,
|
||||
convertToRGBA,
|
||||
};
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
@@ -1,833 +1,6 @@
|
||||
/* Import all modular styles (includes fonts and editor styles) */
|
||||
@import "./styles/index.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.text-1\.5xl {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
.text-2\.5xl {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-primary-10: 229, 243, 250;
|
||||
--color-primary-20: 216, 237, 248;
|
||||
--color-primary-30: 199, 229, 244;
|
||||
--color-primary-40: 169, 214, 239;
|
||||
--color-primary-50: 144, 202, 234;
|
||||
--color-primary-60: 109, 186, 227;
|
||||
--color-primary-70: 75, 170, 221;
|
||||
--color-primary-80: 41, 154, 214;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 0, 99, 153;
|
||||
--color-primary-200: 0, 92, 143;
|
||||
--color-primary-300: 0, 86, 133;
|
||||
--color-primary-400: 0, 77, 117;
|
||||
--color-primary-500: 0, 66, 102;
|
||||
--color-primary-600: 0, 53, 82;
|
||||
--color-primary-700: 0, 43, 66;
|
||||
--color-primary-800: 0, 33, 51;
|
||||
--color-primary-900: 0, 23, 36;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.14);
|
||||
--color-shadow-xs:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.16),
|
||||
0px 2px 4px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 8px -1px rgba(16, 24, 40, 0.1);
|
||||
--color-shadow-sm:
|
||||
0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
|
||||
0px 1px 12px 0px rgba(0, 0, 0, 0.12);
|
||||
--color-shadow-rg:
|
||||
0px 3px 6px 0px rgba(0, 0, 0, 0.1),
|
||||
0px 4px 4px 0px rgba(16, 24, 40, 0.08),
|
||||
0px 1px 12px 0px rgba(16, 24, 40, 0.04);
|
||||
--color-shadow-md:
|
||||
0px 4px 8px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 6px 12px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-lg:
|
||||
0px 6px 12px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 24px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.16),
|
||||
0px 0px 24px 0px rgba(16, 24, 40, 0.16),
|
||||
0px 0px 52px 0px rgba(16, 24, 40, 0.16);
|
||||
--color-shadow-2xl:
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 12px 24px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 32px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-3xl:
|
||||
0px 12px 24px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 16px 32px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 48px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-4xl:
|
||||
0px 8px 40px 0px rgba(0, 0, 61, 0.05),
|
||||
0px 12px 32px -16px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--color-sidebar-background-100: var(
|
||||
--color-background-100
|
||||
); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(
|
||||
--color-background-90
|
||||
); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(
|
||||
--color-background-80
|
||||
); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(
|
||||
--color-text-200
|
||||
); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(
|
||||
--color-text-400
|
||||
); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(
|
||||
--color-border-100
|
||||
); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(
|
||||
--color-border-100
|
||||
); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(
|
||||
--color-border-100
|
||||
); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(
|
||||
--color-border-100
|
||||
); /* strong sidebar border- 2 */
|
||||
|
||||
--color-sidebar-shadow-2xs: var(--color-shadow-2xs);
|
||||
--color-sidebar-shadow-xs: var(--color-shadow-xs);
|
||||
--color-sidebar-shadow-sm: var(--color-shadow-sm);
|
||||
--color-sidebar-shadow-rg: var(--color-shadow-rg);
|
||||
--color-sidebar-shadow-md: var(--color-shadow-md);
|
||||
--color-sidebar-shadow-lg: var(--color-shadow-lg);
|
||||
--color-sidebar-shadow-xl: var(--color-shadow-xl);
|
||||
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
|
||||
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
|
||||
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="light-contrast"] {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(
|
||||
106deg,
|
||||
#f2f6ff 29.8%,
|
||||
#e1eaff 99.34%
|
||||
);
|
||||
--gradient-onboarding-200: linear-gradient(
|
||||
129deg,
|
||||
rgba(255, 255, 255, 0) -22.23%,
|
||||
rgba(255, 255, 255, 0.8) 62.98%
|
||||
);
|
||||
--gradient-onboarding-300: linear-gradient(
|
||||
164deg,
|
||||
#fff 4.25%,
|
||||
rgba(255, 255, 255, 0.06) 93.5%
|
||||
);
|
||||
--gradient-onboarding-400: linear-gradient(
|
||||
129deg,
|
||||
rgba(255, 255, 255, 0) -22.23%,
|
||||
rgba(255, 255, 255, 0.8) 62.98%
|
||||
);
|
||||
|
||||
--color-onboarding-text-100: 23, 23, 23;
|
||||
--color-onboarding-text-200: 58, 58, 58;
|
||||
--color-onboarding-text-300: 82, 82, 82;
|
||||
--color-onboarding-text-400: 163, 163, 163;
|
||||
|
||||
--color-onboarding-background-100: 236, 241, 255;
|
||||
--color-onboarding-background-200: 255, 255, 255;
|
||||
--color-onboarding-background-300: 236, 241, 255;
|
||||
--color-onboarding-background-400: 177, 206, 250;
|
||||
|
||||
--color-onboarding-border-100: 229, 229, 229;
|
||||
--color-onboarding-border-200: 217, 228, 255;
|
||||
--color-onboarding-border-300: 229, 229, 229, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 62, 155, 79;
|
||||
--color-toast-error-text: 220, 62, 66;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 51, 88, 212;
|
||||
--color-toast-loading-text: 28, 32, 36;
|
||||
--color-toast-secondary-text: 128, 131, 141;
|
||||
--color-toast-tertiary-text: 96, 100, 108;
|
||||
|
||||
--color-toast-success-background: 253, 253, 254;
|
||||
--color-toast-error-background: 255, 252, 252;
|
||||
--color-toast-warning-background: 254, 253, 251;
|
||||
--color-toast-info-background: 253, 253, 254;
|
||||
--color-toast-loading-background: 253, 253, 254;
|
||||
|
||||
--color-toast-success-border: 218, 241, 219;
|
||||
--color-toast-error-border: 255, 219, 220;
|
||||
--color-toast-warning-border: 255, 247, 194;
|
||||
--color-toast-info-border: 210, 222, 255;
|
||||
--color-toast-loading-border: 224, 225, 230;
|
||||
}
|
||||
|
||||
[data-theme="light-contrast"] {
|
||||
--color-text-100: 11, 11, 11; /* primary text */
|
||||
--color-text-200: 38, 38, 38; /* secondary text */
|
||||
--color-text-300: 58, 58, 58; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark-contrast"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-primary-10: 8, 31, 43;
|
||||
--color-primary-20: 10, 37, 51;
|
||||
--color-primary-30: 13, 49, 69;
|
||||
--color-primary-40: 16, 58, 81;
|
||||
--color-primary-50: 18, 68, 94;
|
||||
--color-primary-60: 23, 86, 120;
|
||||
--color-primary-70: 28, 104, 146;
|
||||
--color-primary-80: 31, 116, 163;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 40, 146, 204;
|
||||
--color-primary-200: 41, 154, 214;
|
||||
--color-primary-300: 75, 170, 221;
|
||||
--color-primary-400: 109, 186, 227;
|
||||
--color-primary-500: 144, 202, 234;
|
||||
--color-primary-600: 169, 214, 239;
|
||||
--color-primary-700: 199, 229, 244;
|
||||
--color-primary-800: 216, 237, 248;
|
||||
--color-primary-900: 229, 243, 250;
|
||||
|
||||
--color-background-100: 25, 25, 25; /* primary bg */
|
||||
--color-background-90: 32, 32, 32; /* secondary bg */
|
||||
--color-background-80: 44, 44, 44; /* tertiary bg */
|
||||
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-xs:
|
||||
0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-sm:
|
||||
0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-rg:
|
||||
0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-md:
|
||||
0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-lg:
|
||||
0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-xl:
|
||||
0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-2xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||
--color-shadow-3xl:
|
||||
0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-text-100: 229, 229, 229; /* primary text */
|
||||
--color-text-200: 163, 163, 163; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-400: 82, 82, 82; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 82, 82, 82; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(
|
||||
106deg,
|
||||
#18191b 25.17%,
|
||||
#18191b 99.34%
|
||||
);
|
||||
--gradient-onboarding-200: linear-gradient(
|
||||
129deg,
|
||||
rgba(47, 49, 53, 0.8) -22.23%,
|
||||
rgba(33, 34, 37, 0.8) 62.98%
|
||||
);
|
||||
--gradient-onboarding-300: linear-gradient(
|
||||
167deg,
|
||||
rgba(47, 49, 53, 0.45) 19.22%,
|
||||
#212225 98.48%
|
||||
);
|
||||
|
||||
--color-onboarding-text-100: 237, 238, 240;
|
||||
--color-onboarding-text-200: 176, 180, 187;
|
||||
--color-onboarding-text-300: 118, 123, 132;
|
||||
--color-onboarding-text-400: 105, 110, 119;
|
||||
|
||||
--color-onboarding-background-100: 54, 58, 64;
|
||||
--color-onboarding-background-200: 40, 42, 45;
|
||||
--color-onboarding-background-300: 40, 42, 45;
|
||||
--color-onboarding-background-400: 67, 72, 79;
|
||||
|
||||
--color-onboarding-border-100: 54, 58, 64;
|
||||
--color-onboarding-border-200: 54, 58, 64;
|
||||
--color-onboarding-border-300: 34, 35, 38, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
}
|
||||
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-text-100: 250, 250, 250; /* primary text */
|
||||
--color-text-200: 241, 241, 241; /* secondary text */
|
||||
--color-text-300: 212, 212, 212; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="dark"],
|
||||
[data-theme="light-contrast"],
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-sidebar-background-100: var(
|
||||
--color-background-100
|
||||
); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(
|
||||
--color-background-90
|
||||
); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(
|
||||
--color-background-80
|
||||
); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(
|
||||
--color-text-200
|
||||
); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(
|
||||
--color-text-400
|
||||
); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(
|
||||
--color-border-100
|
||||
); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(
|
||||
--color-border-200
|
||||
); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(
|
||||
--color-border-300
|
||||
); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(
|
||||
--color-border-400
|
||||
); /* strong sidebar border- 2 */
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
font-variant-ligatures: none;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
/* scrollbar style */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tags-input-container {
|
||||
border: 2px solid #000;
|
||||
padding: 0.5em;
|
||||
border-radius: 3px;
|
||||
width: min(80vw, 600px);
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: rgb(218, 216, 216);
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.75em;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.tag-item .close {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: rgb(48, 48, 48);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0.5em;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
flex-grow: 1;
|
||||
padding: 0.5em 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* emoji icon picker */
|
||||
.conical-gradient {
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#ff6b00 0deg,
|
||||
#f7ae59 70.5deg,
|
||||
#3f76ff 151.12deg,
|
||||
#05c3ff 213deg,
|
||||
#18914f 289.87deg,
|
||||
#f6f172 329.25deg,
|
||||
#ff6b00 360deg
|
||||
);
|
||||
}
|
||||
|
||||
/* progress bar */
|
||||
.progress-bar {
|
||||
fill: currentColor;
|
||||
color: rgba(var(--color-sidebar-background-100));
|
||||
}
|
||||
|
||||
/* lineclamp */
|
||||
.lineclamp {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
/* popover2 styling */
|
||||
.bp4-popover2-transition-container {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder,
|
||||
::placeholder,
|
||||
:-ms-input-placeholder {
|
||||
color: rgb(var(--color-text-400));
|
||||
}
|
||||
|
||||
.bp4-overlay-content {
|
||||
z-index: 555 !important;
|
||||
}
|
||||
|
||||
.disable-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
-ms-writing-mode: vertical-lr;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
div.web-view-spinner {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: inline-block;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.web-view-spinner div {
|
||||
width: 6%;
|
||||
height: 16%;
|
||||
background: rgb(var(--color-text-400));
|
||||
position: absolute;
|
||||
left: 49%;
|
||||
top: 43%;
|
||||
opacity: 0;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
animation: fade 1s linear infinite;
|
||||
-webkit-animation: fade 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar1 {
|
||||
transform: rotate(0deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(0deg) translate(0, -130%);
|
||||
animation-delay: 0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar2 {
|
||||
transform: rotate(30deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(30deg) translate(0, -130%);
|
||||
animation-delay: -0.9167s;
|
||||
-webkit-animation-delay: -0.9167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar3 {
|
||||
transform: rotate(60deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(60deg) translate(0, -130%);
|
||||
animation-delay: -0.833s;
|
||||
-webkit-animation-delay: -0.833s;
|
||||
}
|
||||
div.web-view-spinner div.bar4 {
|
||||
transform: rotate(90deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(90deg) translate(0, -130%);
|
||||
animation-delay: -0.7497s;
|
||||
-webkit-animation-delay: -0.7497s;
|
||||
}
|
||||
div.web-view-spinner div.bar5 {
|
||||
transform: rotate(120deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(120deg) translate(0, -130%);
|
||||
animation-delay: -0.667s;
|
||||
-webkit-animation-delay: -0.667s;
|
||||
}
|
||||
div.web-view-spinner div.bar6 {
|
||||
transform: rotate(150deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(150deg) translate(0, -130%);
|
||||
animation-delay: -0.5837s;
|
||||
-webkit-animation-delay: -0.5837s;
|
||||
}
|
||||
div.web-view-spinner div.bar7 {
|
||||
transform: rotate(180deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(180deg) translate(0, -130%);
|
||||
animation-delay: -0.5s;
|
||||
-webkit-animation-delay: -0.5s;
|
||||
}
|
||||
div.web-view-spinner div.bar8 {
|
||||
transform: rotate(210deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(210deg) translate(0, -130%);
|
||||
animation-delay: -0.4167s;
|
||||
-webkit-animation-delay: -0.4167s;
|
||||
}
|
||||
div.web-view-spinner div.bar9 {
|
||||
transform: rotate(240deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(240deg) translate(0, -130%);
|
||||
animation-delay: -0.333s;
|
||||
-webkit-animation-delay: -0.333s;
|
||||
}
|
||||
div.web-view-spinner div.bar10 {
|
||||
transform: rotate(270deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(270deg) translate(0, -130%);
|
||||
animation-delay: -0.2497s;
|
||||
-webkit-animation-delay: -0.2497s;
|
||||
}
|
||||
div.web-view-spinner div.bar11 {
|
||||
transform: rotate(300deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(300deg) translate(0, -130%);
|
||||
animation-delay: -0.167s;
|
||||
-webkit-animation-delay: -0.167s;
|
||||
}
|
||||
div.web-view-spinner div.bar12 {
|
||||
transform: rotate(330deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(330deg) translate(0, -130%);
|
||||
animation-delay: -0.0833s;
|
||||
-webkit-animation-delay: -0.0833s;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.vertical-scrollbar,
|
||||
.horizontal-scrollbar {
|
||||
scrollbar-width: initial;
|
||||
scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
|
||||
}
|
||||
.vertical-scrollbar:hover,
|
||||
.horizontal-scrollbar:hover {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
|
||||
}
|
||||
.vertical-scrollbar:active,
|
||||
.horizontal-scrollbar:active {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar,
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-track,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(96, 100, 108, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(96, 100, 108, 0.25);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(96, 100, 108, 0.5);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:active,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(96, 100, 108, 0.7);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-corner,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
/* scrollbar sm size */
|
||||
.scrollbar-sm::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.scrollbar-sm::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar md size */
|
||||
.scrollbar-md::-webkit-scrollbar {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
.scrollbar-md::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar lg size */
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.scrollbar-lg::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* highlight class */
|
||||
.highlight {
|
||||
border: 1px solid rgb(var(--color-primary-100)) !important;
|
||||
}
|
||||
.highlight-with-line {
|
||||
border-left: 5px solid rgb(var(--color-primary-100)) !important;
|
||||
background: rgb(var(--color-background-80));
|
||||
}
|
||||
|
||||
/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers */
|
||||
|
||||
.disable-autofill-style:-webkit-autofill,
|
||||
.disable-autofill-style:-webkit-autofill:hover,
|
||||
.disable-autofill-style:-webkit-autofill:focus,
|
||||
.disable-autofill-style:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
@keyframes slideInFromBottom {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromTop {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
"description": "common tailwind configuration across monorepo",
|
||||
"main": "tailwind.config.js",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"postcss-import": "^16.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
"postcss-import": {
|
||||
resolve: function (id, basedir) {
|
||||
// Handle package imports like @plane/tailwind-config
|
||||
if (id.startsWith("@plane/")) {
|
||||
return require.resolve(id);
|
||||
}
|
||||
// Default resolution
|
||||
return id;
|
||||
},
|
||||
},
|
||||
"tailwindcss/nesting": {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
/* Global CSS Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
font-variant-ligatures: none;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/* Scrollbar Styles */
|
||||
|
||||
/* Hide scrollbar by default */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.vertical-scrollbar,
|
||||
.horizontal-scrollbar {
|
||||
scrollbar-width: initial;
|
||||
scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
|
||||
}
|
||||
.vertical-scrollbar:hover,
|
||||
.horizontal-scrollbar:hover {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
|
||||
}
|
||||
.vertical-scrollbar:active,
|
||||
.horizontal-scrollbar:active {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar classes */
|
||||
.vertical-scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.vertical-scrollbar::-webkit-scrollbar,
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vertical-scrollbar::-webkit-scrollbar-track,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(96, 100, 108, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(96, 100, 108, 0.25);
|
||||
}
|
||||
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(96, 100, 108, 0.5);
|
||||
}
|
||||
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:active,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(96, 100, 108, 0.7);
|
||||
}
|
||||
|
||||
.vertical-scrollbar::-webkit-scrollbar-corner,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
/* Scrollbar size variants */
|
||||
.scrollbar-xs::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.scrollbar-xs::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.scrollbar-sm::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.scrollbar-sm::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.scrollbar-md::-webkit-scrollbar {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.scrollbar-md::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* Hide scrollbar variants */
|
||||
.hide-vertical-scrollbar::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.hide-horizontal-scrollbar::-webkit-scrollbar {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.hide-both-scrollbars::-webkit-scrollbar {
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/* Typography and Font Styles */
|
||||
@layer base {
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.text-1\.5xl {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
.text-2\.5xl {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Placeholder styles */
|
||||
::-webkit-input-placeholder,
|
||||
::placeholder,
|
||||
:-ms-input-placeholder {
|
||||
color: rgb(var(--color-text-400));
|
||||
}
|
||||
|
||||
/* Line clamp utility */
|
||||
.lineclamp {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
}
|
||||
|
||||
/* Vertical text direction */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
-ms-writing-mode: vertical-lr;
|
||||
width: fit-content;
|
||||
}
|
||||
+15
@@ -1,3 +1,4 @@
|
||||
/* Emoji Picker Styles */
|
||||
.EmojiPickerReact {
|
||||
--epr-category-navigation-button-size: 1.25rem !important;
|
||||
--epr-category-label-height: 1.5rem !important;
|
||||
@@ -50,3 +51,17 @@ button.epr-btn-clear-search:hover {
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
border-color: rgba(var(--color-border-200)) !important;
|
||||
}
|
||||
|
||||
.epr-search-container > input {
|
||||
background-color: rgb(var(--color-background-90)) !important;
|
||||
color: rgb(var(--color-text-100)) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.epr-search-container > input::placeholder {
|
||||
color: rgb(var(--color-text-400)) !important;
|
||||
}
|
||||
|
||||
.epr-search-container > .epr-icn-search {
|
||||
color: rgb(var(--color-text-400)) !important;
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
/* Web View Spinner Styles */
|
||||
div.web-view-spinner {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: inline-block;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.web-view-spinner div {
|
||||
width: 6%;
|
||||
height: 16%;
|
||||
background: rgb(var(--color-text-400));
|
||||
position: absolute;
|
||||
left: 49%;
|
||||
top: 43%;
|
||||
opacity: 0;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
animation: fade 1s linear infinite;
|
||||
-webkit-animation: fade 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar1 {
|
||||
transform: rotate(0deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(0deg) translate(0, -130%);
|
||||
animation-delay: 0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar2 {
|
||||
transform: rotate(30deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(30deg) translate(0, -130%);
|
||||
animation-delay: -0.9167s;
|
||||
-webkit-animation-delay: -0.9167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar3 {
|
||||
transform: rotate(60deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(60deg) translate(0, -130%);
|
||||
animation-delay: -0.833s;
|
||||
-webkit-animation-delay: -0.833s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar4 {
|
||||
transform: rotate(90deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(90deg) translate(0, -130%);
|
||||
animation-delay: -0.7497s;
|
||||
-webkit-animation-delay: -0.7497s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar5 {
|
||||
transform: rotate(120deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(120deg) translate(0, -130%);
|
||||
animation-delay: -0.667s;
|
||||
-webkit-animation-delay: -0.667s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar6 {
|
||||
transform: rotate(150deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(150deg) translate(0, -130%);
|
||||
animation-delay: -0.5837s;
|
||||
-webkit-animation-delay: -0.5837s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar7 {
|
||||
transform: rotate(180deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(180deg) translate(0, -130%);
|
||||
animation-delay: -0.5s;
|
||||
-webkit-animation-delay: -0.5s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar8 {
|
||||
transform: rotate(210deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(210deg) translate(0, -130%);
|
||||
animation-delay: -0.4167s;
|
||||
-webkit-animation-delay: -0.4167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar9 {
|
||||
transform: rotate(240deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(240deg) translate(0, -130%);
|
||||
animation-delay: -0.333s;
|
||||
-webkit-animation-delay: -0.333s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar10 {
|
||||
transform: rotate(270deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(270deg) translate(0, -130%);
|
||||
animation-delay: -0.2497s;
|
||||
-webkit-animation-delay: -0.2497s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar11 {
|
||||
transform: rotate(300deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(300deg) translate(0, -130%);
|
||||
animation-delay: -0.167s;
|
||||
-webkit-animation-delay: -0.167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar12 {
|
||||
transform: rotate(330deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(330deg) translate(0, -130%);
|
||||
animation-delay: -0.0833s;
|
||||
-webkit-animation-delay: -0.0833s;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
/* Tags Input Component Styles */
|
||||
.tags-input-container {
|
||||
border: 2px solid rgba(var(--color-border-200));
|
||||
padding: 0.5em;
|
||||
border-radius: 3px;
|
||||
width: min(80vw, 600px);
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: rgba(var(--color-background-80));
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.75em;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.tag-item .close {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: rgba(var(--color-background-90));
|
||||
color: rgba(var(--color-text-100));
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0.5em;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
flex-grow: 1;
|
||||
padding: 0.5em 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
/* Utility Classes */
|
||||
@layer utilities {
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.3s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
fill: currentColor;
|
||||
color: rgba(var(--color-sidebar-background-100));
|
||||
}
|
||||
|
||||
/* Popover2 styling */
|
||||
.bp4-popover2-transition-container {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.bp4-overlay-content {
|
||||
z-index: 555 !important;
|
||||
}
|
||||
|
||||
.disable-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Emoji icon picker */
|
||||
.conical-gradient {
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#ff6b00 0deg,
|
||||
#f7ae59 70.5deg,
|
||||
#3f76ff 151.12deg,
|
||||
#05c3ff 213deg,
|
||||
#18914f 289.87deg,
|
||||
#f6f172 329.25deg,
|
||||
#ff6b00 360deg
|
||||
);
|
||||
}
|
||||
|
||||
/* Shadow custom */
|
||||
.shadow-custom {
|
||||
box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
|
||||
}
|
||||
|
||||
/* Backdrop filter */
|
||||
.backdrop-blur-custom {
|
||||
@apply backdrop-filter blur-[9px];
|
||||
}
|
||||
|
||||
/* Highlight class */
|
||||
.highlight {
|
||||
border: 1px solid rgb(var(--color-primary-100)) !important;
|
||||
}
|
||||
|
||||
.highlight-with-line {
|
||||
border-left: 5px solid rgb(var(--color-primary-100)) !important;
|
||||
background: rgb(var(--color-background-80));
|
||||
}
|
||||
|
||||
/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers */
|
||||
.disable-autofill-style:-webkit-autofill,
|
||||
.disable-autofill-style:-webkit-autofill:hover,
|
||||
.disable-autofill-style:-webkit-autofill:focus,
|
||||
.disable-autofill-style:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
/* Lock icon animations */
|
||||
@keyframes textSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
max-width: 0px;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
max-width: 60px;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
max-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lockIconAnimation {
|
||||
0% {
|
||||
transform: rotate(-5deg) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(0deg) scale(1.15);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg) scale(1.08);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unlockIconAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-8deg) scale(1.15);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(3deg) scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-text-slide-in {
|
||||
animation: textSlideIn 400ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-text-fade-out {
|
||||
animation: textFadeOut 600ms ease-in 300ms forwards;
|
||||
}
|
||||
|
||||
.animate-lock-icon {
|
||||
animation: lockIconAnimation 600ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-unlock-icon {
|
||||
animation: unlockIconAnimation 600ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
animation: fadeOut 500ms ease-in 100ms forwards;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
0% {
|
||||
background-color: rgba(var(--color-background-90), 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromBottom {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromTop {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
/* side menu */
|
||||
#editor-side-menu {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease 0.2s;
|
||||
|
||||
&.side-menu-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
/* end side menu */
|
||||
|
||||
/* drag handle */
|
||||
#drag-handle {
|
||||
opacity: 1;
|
||||
|
||||
&.drag-handle-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
/* end drag handle */
|
||||
|
||||
/* ai handle */
|
||||
#ai-handle {
|
||||
opacity: 1;
|
||||
|
||||
&.handle-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
/* end ai handle */
|
||||
|
||||
.ProseMirror:not(.dragging)
|
||||
.ProseMirror-selectednode:not(.node-imageComponent):not(.node-image):not(
|
||||
.table-wrapper
|
||||
) {
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
|
||||
--horizontal-offset: 5px;
|
||||
|
||||
&:has(.issue-embed),
|
||||
&.table-wrapper {
|
||||
--horizontal-offset: 0px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(-1 * var(--horizontal-offset));
|
||||
height: 100%;
|
||||
width: calc(100% + (var(--horizontal-offset) * 2));
|
||||
background-color: rgba(var(--color-primary-100), 0.2);
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.node-imageComponent,
|
||||
&.node-image,
|
||||
&.table-wrapper {
|
||||
--horizontal-offset: 0px;
|
||||
|
||||
&::after {
|
||||
background-color: rgba(var(--color-background-100), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* for targeting the task list items */
|
||||
li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
/* for targeting the unordered list items */
|
||||
ul > li.ProseMirror-selectednode:not(.dragging)::after {
|
||||
margin-left: -10px; /* Adjust as needed */
|
||||
}
|
||||
|
||||
/* Initialize a counter for the ordered list */
|
||||
ol {
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
/* for targeting the ordered list items */
|
||||
ol > li.ProseMirror-selectednode:not(.dragging)::after {
|
||||
counter-increment: item;
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
/* for targeting the ordered list items after the 9th item */
|
||||
ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
/* for targeting the ordered list items after the 99th item */
|
||||
ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.ProseMirror .node-image,
|
||||
.ProseMirror .node-imageComponent {
|
||||
transition: filter 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
&.ProseMirror-selectednode {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,506 @@
|
||||
.ProseMirror {
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
outline: none !important;
|
||||
cursor: text;
|
||||
font-family: var(--font-style);
|
||||
font-size: var(--font-size-regular);
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Placeholder only for the first line in an empty editor. */
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: var(--color-placeholder);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Display Placeholders on every new line. */
|
||||
.ProseMirror p.is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: var(--color-placeholder);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ProseMirror li blockquote {
|
||||
margin-top: 10px;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
/* block quotes */
|
||||
.ProseMirror blockquote {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
border-left: 3px solid rgb(var(--color-border-300));
|
||||
}
|
||||
|
||||
.ProseMirror blockquote p::before,
|
||||
.ProseMirror blockquote p::after {
|
||||
display: none;
|
||||
}
|
||||
/* end block quotes */
|
||||
|
||||
.ProseMirror code::before,
|
||||
.ProseMirror code::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Custom image styles */
|
||||
.ProseMirror img {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(.read-only-image):not(.loading-image) {
|
||||
transition: filter 0.1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
&.ProseMirror-selectednode {
|
||||
outline: 3px solid rgba(var(--color-primary-100));
|
||||
filter: brightness(90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom gap cursor styles */
|
||||
.ProseMirror-gapcursor::after {
|
||||
border-top: 1px solid rgb(var(--color-text-100)) !important;
|
||||
}
|
||||
|
||||
/* to-do list */
|
||||
ul[data-type="taskList"] li {
|
||||
font-size: var(--font-size-list);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
margin: 0.1rem 0.15rem 0 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > div {
|
||||
margin-left: 1.15rem;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
border: 1px solid rgba(var(--color-text-100), 0.2) !important;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
|
||||
background-color: rgba(var(--color-text-100), 0.1);
|
||||
}
|
||||
|
||||
.ProseMirror[contenteditable="false"] input[type="checkbox"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
|
||||
background-color: rgba(var(--color-primary-100)) !important;
|
||||
border-color: rgba(var(--color-primary-100)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
|
||||
background-color: rgba(var(--color-primary-300)) !important;
|
||||
border-color: rgba(var(--color-primary-300)) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
ul[data-type="taskList"] li > label {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* the p tag just after the ul tag */
|
||||
ul[data-type="taskList"] + p.editor-paragraph-block {
|
||||
margin-top: 0.4rem !important;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border: 1.5px solid rgb(var(--color-text-100));
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
&:active {
|
||||
background-color: rgb(var(--color-background-90));
|
||||
}
|
||||
|
||||
/* check sign */
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > div {
|
||||
& > p.editor-paragraph-block {
|
||||
margin-top: 10px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
[data-text-color] {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li[data-checked="true"] {
|
||||
& > div > p.editor-paragraph-block {
|
||||
color: var(--color-placeholder);
|
||||
}
|
||||
|
||||
[data-text-color] {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
/* end to-do list */
|
||||
|
||||
/* Overwrite tippy-box original max-width */
|
||||
|
||||
.tippy-box {
|
||||
max-width: 800px !important;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes spinning {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.resize-cursor {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.ProseMirror table * .is-empty::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* code block, inline code */
|
||||
.ProseMirror pre {
|
||||
font-family: JetBrainsMono, monospace;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.ProseMirror pre code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ProseMirror code {
|
||||
font-size: var(--font-size-code);
|
||||
}
|
||||
/* end code block, inline code */
|
||||
|
||||
div[data-type="horizontalRule"] {
|
||||
line-height: 0;
|
||||
padding: var(--divider-padding-top) 0 var(--divider-padding-bottom) 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& > div {
|
||||
border-bottom: 2px solid rgb(var(--color-border-200));
|
||||
}
|
||||
}
|
||||
|
||||
/* Cursor styles for the inline code blocks */
|
||||
@keyframes blink {
|
||||
49% {
|
||||
border-color: unset;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
99% {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.no-cursor {
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
div:focus .fake-cursor,
|
||||
span:focus .fake-cursor {
|
||||
margin-right: -1px;
|
||||
border-left-width: 1.5px;
|
||||
border-left-style: solid;
|
||||
animation: blink 1s;
|
||||
animation-iteration-count: infinite;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* numbered, bulleted and to-do lists spacing */
|
||||
.prose ol:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
|
||||
.prose
|
||||
ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
|
||||
.prose ul[data-type="taskList"]:where(.prose > :first-child) {
|
||||
margin-top: 0.25rem !important;
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
|
||||
.prose
|
||||
ul:not([data-type="taskList"]):not(
|
||||
:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))
|
||||
),
|
||||
.prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
|
||||
margin-top: calc(0.25rem + 3px) !important;
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul:not([data-type="taskList"]),
|
||||
ul:not([data-type="taskList"]) ul:not([data-type="taskList"]),
|
||||
ul:not([data-type="taskList"]) ol {
|
||||
margin-top: 0.45rem !important;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] ul[data-type="taskList"] {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
/* end numbered, bulleted and to-do lists spacing */
|
||||
|
||||
h1.editor-heading-block,
|
||||
h2.editor-heading-block,
|
||||
h3.editor-heading-block,
|
||||
h4.editor-heading-block,
|
||||
h5.editor-heading-block,
|
||||
h6.editor-heading-block,
|
||||
p.editor-paragraph-block {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* tailwind typography */
|
||||
.prose :where(h1.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-1-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-1-padding-bottom);
|
||||
font-size: var(--font-size-h1) !important;
|
||||
line-height: var(--line-height-h1) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h2.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-2-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-2-padding-bottom);
|
||||
font-size: var(--font-size-h2) !important;
|
||||
line-height: var(--line-height-h2) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h3.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-3-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-3-padding-bottom);
|
||||
font-size: var(--font-size-h3) !important;
|
||||
line-height: var(--line-height-h3) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h4.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-4-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-4-padding-bottom);
|
||||
font-size: var(--font-size-h4) !important;
|
||||
line-height: var(--line-height-h4) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h5.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-5-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-5-padding-bottom);
|
||||
font-size: var(--font-size-h5) !important;
|
||||
line-height: var(--line-height-h5) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h6.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-6-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-6-padding-bottom);
|
||||
font-size: var(--font-size-h6) !important;
|
||||
line-height: var(--line-height-h6) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(p.editor-paragraph-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--paragraph-padding-top);
|
||||
}
|
||||
|
||||
&:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
|
||||
&:last-child {
|
||||
padding-bottom: var(--paragraph-padding-bottom);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: var(--paragraph-padding-between);
|
||||
}
|
||||
}
|
||||
|
||||
font-size: var(--font-size-regular) !important;
|
||||
line-height: var(--line-height-regular) !important;
|
||||
}
|
||||
|
||||
p.editor-paragraph-block + p.editor-paragraph-block {
|
||||
padding-top: var(--paragraph-padding-between) !important;
|
||||
}
|
||||
|
||||
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block,
|
||||
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block {
|
||||
font-size: var(--font-size-list);
|
||||
line-height: var(--line-height-list);
|
||||
}
|
||||
|
||||
.prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* end tailwind typography */
|
||||
|
||||
/* text colors */
|
||||
[data-text-color="gray"] {
|
||||
color: var(--editor-colors-gray-text);
|
||||
}
|
||||
[data-text-color="peach"] {
|
||||
color: var(--editor-colors-peach-text);
|
||||
}
|
||||
[data-text-color="pink"] {
|
||||
color: var(--editor-colors-pink-text);
|
||||
}
|
||||
[data-text-color="orange"] {
|
||||
color: var(--editor-colors-orange-text);
|
||||
}
|
||||
[data-text-color="green"] {
|
||||
color: var(--editor-colors-green-text);
|
||||
}
|
||||
[data-text-color="light-blue"] {
|
||||
color: var(--editor-colors-light-blue-text);
|
||||
}
|
||||
[data-text-color="dark-blue"] {
|
||||
color: var(--editor-colors-dark-blue-text);
|
||||
}
|
||||
[data-text-color="purple"] {
|
||||
color: var(--editor-colors-purple-text);
|
||||
}
|
||||
/* end text colors */
|
||||
|
||||
/* background colors */
|
||||
[data-background-color="gray"] {
|
||||
background-color: var(--editor-colors-gray-background);
|
||||
}
|
||||
[data-background-color="peach"] {
|
||||
background-color: var(--editor-colors-peach-background);
|
||||
}
|
||||
[data-background-color="pink"] {
|
||||
background-color: var(--editor-colors-pink-background);
|
||||
}
|
||||
[data-background-color="orange"] {
|
||||
background-color: var(--editor-colors-orange-background);
|
||||
}
|
||||
[data-background-color="green"] {
|
||||
background-color: var(--editor-colors-green-background);
|
||||
}
|
||||
[data-background-color="light-blue"] {
|
||||
background-color: var(--editor-colors-light-blue-background);
|
||||
}
|
||||
[data-background-color="dark-blue"] {
|
||||
background-color: var(--editor-colors-dark-blue-background);
|
||||
}
|
||||
[data-background-color="purple"] {
|
||||
background-color: var(--editor-colors-purple-background);
|
||||
}
|
||||
/* end background colors */
|
||||
|
||||
/* emoji styles */
|
||||
span[data-name][data-type="emoji"] img {
|
||||
display: inline !important;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 1.25em;
|
||||
max-height: 1.25em;
|
||||
}
|
||||
|
||||
/* touch device styles */
|
||||
.touch-select-none {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.hljs {
|
||||
color: #c9d1d9;
|
||||
background: #0d1117;
|
||||
}
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id,
|
||||
.hljs-variable {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.hljs-meta .hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-string {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
color: #ffa657;
|
||||
}
|
||||
.hljs-code,
|
||||
.hljs-comment,
|
||||
.hljs-formula {
|
||||
color: #8b949e;
|
||||
}
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-selector-tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
.hljs-subst {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
.hljs-section {
|
||||
color: #1f6feb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hljs-bullet {
|
||||
color: #f2cc60;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
color: #c9d1d9;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
color: #c9d1d9;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hljs-addition {
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
.hljs-deletion {
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "./variables.css";
|
||||
@import "./editor.css";
|
||||
@import "./table.css";
|
||||
@import "./github-dark.css";
|
||||
@import "./drag-drop.css";
|
||||
@@ -0,0 +1,216 @@
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 26px;
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
margin: 0.5rem 0 0 0;
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
min-width: 1em;
|
||||
border: 1px solid rgba(var(--color-border-300));
|
||||
padding: 7px 10px;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Selected cell outline */
|
||||
&.selectedCell:not(.content-hidden) {
|
||||
user-select: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
height: calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
}
|
||||
|
||||
&.selectedCell-border-top::after {
|
||||
border-top: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
|
||||
&.selectedCell-border-left::after {
|
||||
border-left: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
|
||||
&.selectedCell-border-bottom::after {
|
||||
border-bottom: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
|
||||
&.selectedCell-border-right::after {
|
||||
border-right: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
}
|
||||
/* End selected cell outline */
|
||||
|
||||
.table-col-handle-container,
|
||||
.table-row-handle-container {
|
||||
& > button {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.table-col-handle-container,
|
||||
.table-row-handle-container {
|
||||
& > button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProseMirror-widget + * {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
&.content-hidden > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr[background="none"],
|
||||
tr:not([background]) {
|
||||
th {
|
||||
background-color: rgba(var(--color-background-90));
|
||||
}
|
||||
}
|
||||
|
||||
.table-drop-marker {
|
||||
background-color: rgba(var(--color-primary-100));
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-col-drag-marker,
|
||||
.table-row-drag-marker {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-col-drag-marker {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
.table-row-drag-marker {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Selected status */
|
||||
&.ProseMirror-selectednode {
|
||||
table {
|
||||
background-color: rgba(var(--color-primary-100), 0.2);
|
||||
}
|
||||
}
|
||||
/* End selected status */
|
||||
}
|
||||
|
||||
/* Column resizer */
|
||||
.table-wrapper table .column-resize-handle {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
width: 2px;
|
||||
height: calc(100% + 2px);
|
||||
z-index: 5;
|
||||
background-color: rgba(var(--color-primary-100));
|
||||
pointer-events: none;
|
||||
}
|
||||
/* End column resizer */
|
||||
|
||||
.resize-cursor .table-wrapper .table-controls .rows-control,
|
||||
.table-wrapper.controls--disabled .table-controls .rows-control,
|
||||
.resize-cursor .table-wrapper .table-controls .columns-control,
|
||||
.table-wrapper.controls--disabled .table-controls .columns-control {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Insert buttons */
|
||||
.table-wrapper {
|
||||
.table-column-insert-button,
|
||||
.table-row-insert-button {
|
||||
position: absolute;
|
||||
background-color: rgba(var(--color-background-90));
|
||||
color: rgba(var(--color-text-300));
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
outline: none;
|
||||
z-index: 10;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--color-background-80));
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
background-color: rgba(var(--color-primary-100), 0.2);
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-column-insert-button {
|
||||
top: 0;
|
||||
right: -16px;
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
transform: translateX(50%);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.table-row-insert-button {
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
transform: translateY(50%);
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
/* Show buttons on table hover */
|
||||
&:hover {
|
||||
.table-column-insert-button,
|
||||
.table-row-insert-button {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End insert buttons */
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -0,0 +1,305 @@
|
||||
:root {
|
||||
/* text colors */
|
||||
--editor-colors-gray-text: #5c5e63;
|
||||
--editor-colors-peach-text: #ff5b59;
|
||||
--editor-colors-pink-text: #f65385;
|
||||
--editor-colors-orange-text: #fd9038;
|
||||
--editor-colors-green-text: #0fc27b;
|
||||
--editor-colors-light-blue-text: #17bee9;
|
||||
--editor-colors-dark-blue-text: #266df0;
|
||||
--editor-colors-purple-text: #9162f9;
|
||||
/* end text colors */
|
||||
|
||||
/* layout */
|
||||
--normal-content-width: 720px;
|
||||
--wide-content-width: 1152px;
|
||||
--normal-content-margin: 20px;
|
||||
--wide-content-margin: 96px;
|
||||
/* end layout */
|
||||
}
|
||||
|
||||
/* text background colors */
|
||||
[data-theme*="light"] {
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
}
|
||||
[data-theme*="dark"] {
|
||||
--editor-colors-gray-background: #404144;
|
||||
--editor-colors-peach-background: #593032;
|
||||
--editor-colors-pink-background: #562e3d;
|
||||
--editor-colors-orange-background: #583e2a;
|
||||
--editor-colors-green-background: #1d4a3b;
|
||||
--editor-colors-light-blue-background: #1f495c;
|
||||
--editor-colors-dark-blue-background: #223558;
|
||||
--editor-colors-purple-background: #3d325a;
|
||||
}
|
||||
/* end text background colors */
|
||||
|
||||
/* font size and style */
|
||||
.editor-container {
|
||||
--color-placeholder: rgba(var(--color-text-100), 0.5);
|
||||
|
||||
/* font sizes and line heights */
|
||||
&.large-font {
|
||||
--font-size-h1: 1.75rem;
|
||||
--font-size-h2: 1.5rem;
|
||||
--font-size-h3: 1.375rem;
|
||||
--font-size-h4: 1.25rem;
|
||||
--font-size-h5: 1.125rem;
|
||||
--font-size-h6: 1rem;
|
||||
--font-size-regular: 1rem;
|
||||
--font-size-code: 0.85rem;
|
||||
--font-size-list: var(--font-size-regular);
|
||||
|
||||
--line-height-h1: 2.25rem;
|
||||
--line-height-h2: 2rem;
|
||||
--line-height-h3: 1.75rem;
|
||||
--line-height-h4: 1.5rem;
|
||||
--line-height-h5: 1.5rem;
|
||||
--line-height-h6: 1.5rem;
|
||||
--line-height-regular: 1.5rem;
|
||||
--line-height-code: 1.5rem;
|
||||
--line-height-list: var(--line-height-regular);
|
||||
}
|
||||
&.small-font {
|
||||
--font-size-h1: 1.4rem;
|
||||
--font-size-h2: 1.2rem;
|
||||
--font-size-h3: 1.1rem;
|
||||
--font-size-h4: 1rem;
|
||||
--font-size-h5: 0.9rem;
|
||||
--font-size-h6: 0.8rem;
|
||||
--font-size-regular: 0.8rem;
|
||||
--font-size-code: 0.8rem;
|
||||
--font-size-list: var(--font-size-regular);
|
||||
|
||||
--line-height-h1: 1.8rem;
|
||||
--line-height-h2: 1.6rem;
|
||||
--line-height-h3: 1.4rem;
|
||||
--line-height-h4: 1.2rem;
|
||||
--line-height-h5: 1.2rem;
|
||||
--line-height-h6: 1.2rem;
|
||||
--line-height-regular: 1.2rem;
|
||||
--line-height-code: 1.2rem;
|
||||
--line-height-list: var(--line-height-regular);
|
||||
}
|
||||
|
||||
&.mobile-font {
|
||||
--font-size-h1: 1.75rem;
|
||||
--font-size-h2: 1.5rem;
|
||||
--font-size-h3: 1.375rem;
|
||||
--font-size-h4: 1.25rem;
|
||||
--font-size-h5: 1.125rem;
|
||||
--font-size-h6: 1rem;
|
||||
--font-size-regular: 0.95rem;
|
||||
--font-size-code: 0.85rem;
|
||||
--font-size-list: var(--font-size-regular);
|
||||
|
||||
--line-height-h1: 2.25rem;
|
||||
--line-height-h2: 2rem;
|
||||
--line-height-h3: 1.75rem;
|
||||
--line-height-h4: 1.5rem;
|
||||
--line-height-h5: 1.5rem;
|
||||
--line-height-h6: 1.5rem;
|
||||
--line-height-regular: 1.5rem;
|
||||
--line-height-code: 1.5rem;
|
||||
--line-height-list: var(--line-height-regular);
|
||||
}
|
||||
/* end font sizes and line heights */
|
||||
|
||||
/* font styles */
|
||||
--font-style: "Inter", sans-serif;
|
||||
|
||||
&.sans-serif {
|
||||
--font-style: "Inter", sans-serif;
|
||||
}
|
||||
&.serif {
|
||||
--font-style: serif;
|
||||
}
|
||||
&.monospace {
|
||||
--font-style: monospace;
|
||||
}
|
||||
/* end font styles */
|
||||
|
||||
/* spacing */
|
||||
&.line-spacing-regular {
|
||||
--heading-1-padding-top: 28px;
|
||||
--heading-1-padding-bottom: 4px;
|
||||
--heading-2-padding-top: 28px;
|
||||
--heading-2-padding-bottom: 4px;
|
||||
--heading-3-padding-top: 28px;
|
||||
--heading-3-padding-bottom: 4px;
|
||||
--heading-4-padding-top: 28px;
|
||||
--heading-4-padding-bottom: 4px;
|
||||
--heading-5-padding-top: 20px;
|
||||
--heading-5-padding-bottom: 4px;
|
||||
--heading-6-padding-top: 20px;
|
||||
--heading-6-padding-bottom: 4px;
|
||||
--paragraph-padding-top: 4px;
|
||||
--paragraph-padding-bottom: 4px;
|
||||
--paragraph-padding-between: 8px;
|
||||
--list-spacing-y: 8px;
|
||||
--divider-padding-top: 4px;
|
||||
--divider-padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&.line-spacing-small {
|
||||
--heading-1-padding-top: 16px;
|
||||
--heading-1-padding-bottom: 4px;
|
||||
--heading-2-padding-top: 16px;
|
||||
--heading-2-padding-bottom: 4px;
|
||||
--heading-3-padding-top: 16px;
|
||||
--heading-3-padding-bottom: 4px;
|
||||
--heading-4-padding-top: 16px;
|
||||
--heading-4-padding-bottom: 4px;
|
||||
--heading-5-padding-top: 12px;
|
||||
--heading-5-padding-bottom: 4px;
|
||||
--heading-6-padding-top: 12px;
|
||||
--heading-6-padding-bottom: 4px;
|
||||
--paragraph-padding-top: 2px;
|
||||
--paragraph-padding-bottom: 2px;
|
||||
--paragraph-padding-between: 4px;
|
||||
--list-spacing-y: 0px;
|
||||
--divider-padding-top: 0px;
|
||||
--divider-padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&.line-spacing-mobile-regular {
|
||||
--heading-1-padding-top: 16px;
|
||||
--heading-1-padding-bottom: 4px;
|
||||
--heading-2-padding-top: 16px;
|
||||
--heading-2-padding-bottom: 4px;
|
||||
--heading-3-padding-top: 16px;
|
||||
--heading-3-padding-bottom: 4px;
|
||||
--heading-4-padding-top: 16px;
|
||||
--heading-4-padding-bottom: 4px;
|
||||
--heading-5-padding-top: 12px;
|
||||
--heading-5-padding-bottom: 4px;
|
||||
--heading-6-padding-top: 12px;
|
||||
--heading-6-padding-bottom: 4px;
|
||||
--paragraph-padding-top: 2px;
|
||||
--paragraph-padding-bottom: 2px;
|
||||
--paragraph-padding-between: 4px;
|
||||
--list-spacing-y: 0px;
|
||||
--divider-padding-top: 0px;
|
||||
--divider-padding-bottom: 4px;
|
||||
}
|
||||
/* end spacing */
|
||||
}
|
||||
/* end font size and style */
|
||||
|
||||
/* layout config */
|
||||
#page-toolbar-container {
|
||||
container-name: page-toolbar-container;
|
||||
container-type: inline-size;
|
||||
|
||||
.page-toolbar-content {
|
||||
--header-width: var(--normal-content-width);
|
||||
|
||||
&.wide-layout {
|
||||
--header-width: var(--wide-content-width);
|
||||
}
|
||||
|
||||
padding-left: calc(((100% - var(--header-width)) / 2) - 10px);
|
||||
}
|
||||
}
|
||||
|
||||
#page-content-container {
|
||||
container-name: page-content-container;
|
||||
container-type: inline-size;
|
||||
|
||||
.frame-renderer {
|
||||
--editor-content-width: var(--normal-content-width);
|
||||
|
||||
&.wide-layout {
|
||||
--editor-content-width: var(--wide-content-width);
|
||||
}
|
||||
|
||||
.editor-container.page-title-editor .ProseMirror,
|
||||
.document-editor-loader {
|
||||
max-width: var(--editor-content-width);
|
||||
margin: 0 auto;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.editor-container.document-editor .ProseMirror {
|
||||
& > *:not(.editor-full-width-block) {
|
||||
max-width: var(--editor-content-width);
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
& > .editor-full-width-block {
|
||||
max-width: 100%;
|
||||
padding-inline-start: calc((100% - var(--editor-content-width)) / 2);
|
||||
padding-inline-end: var(--wide-content-margin);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
|
||||
@container page-toolbar-container (min-width: 912px) and (max-width: 1344px) {
|
||||
.page-toolbar-content.wide-layout {
|
||||
padding-left: var(--wide-content-margin) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* keep a static padding of 96px for wide layouts for container width <912px */
|
||||
@container page-toolbar-container (max-width: 912px) {
|
||||
.page-toolbar-content.wide-layout {
|
||||
padding-left: var(--wide-content-margin) !important;
|
||||
}
|
||||
}
|
||||
/* end layout config */
|
||||
|
||||
/* keep a static padding of 20px for wide layouts for container width <760px */
|
||||
@container page-toolbar-container (max-width: 760px) {
|
||||
.page-toolbar-content {
|
||||
padding-left: var(--normal-content-margin) !important;
|
||||
}
|
||||
}
|
||||
/* end layout config */
|
||||
|
||||
/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
|
||||
@container page-content-container (min-width: 912px) and (max-width: 1344px) {
|
||||
#page-content-container .frame-renderer.wide-layout .editor-container,
|
||||
#page-content-container .frame-renderer.wide-layout .document-editor-loader,
|
||||
.page-header-container {
|
||||
padding-left: var(--wide-content-margin);
|
||||
padding-right: var(--wide-content-margin);
|
||||
}
|
||||
}
|
||||
|
||||
/* keep a static padding of 20px for wide layouts for container width <912px */
|
||||
@container page-content-container (max-width: 912px) {
|
||||
#page-content-container .frame-renderer.wide-layout .editor-container,
|
||||
#page-content-container .frame-renderer.wide-layout .document-editor-loader,
|
||||
.page-header-container {
|
||||
padding-left: var(--normal-content-margin);
|
||||
padding-right: var(--normal-content-margin);
|
||||
}
|
||||
}
|
||||
|
||||
/* keep a static padding of 20px for normal layouts for container width <760px */
|
||||
@container page-content-container (max-width: 760px) {
|
||||
#page-content-container .frame-renderer:not(.wide-layout) .editor-container,
|
||||
#page-content-container .frame-renderer:not(.wide-layout) .document-editor-loader,
|
||||
.page-header-container {
|
||||
padding-left: var(--normal-content-margin);
|
||||
padding-right: var(--normal-content-margin);
|
||||
}
|
||||
}
|
||||
|
||||
@container page-content-container (max-width: 930px) {
|
||||
.page-summary-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* end layout config */
|
||||
@@ -0,0 +1,89 @@
|
||||
/* Inter Font Family */
|
||||
/* inter-200 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-200.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* inter-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-300.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* inter-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 405;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* inter-500 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-500.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* inter-600 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-600.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* inter-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-700.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* inter-800 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url("~@plane/tailwind-config/fonts/Inter/inter-v13-latin-800.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* Material Symbols Rounded Font */
|
||||
/* material-symbols-rounded-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "Material Symbols Rounded";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("~@plane/tailwind-config/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
.material-symbols-rounded {
|
||||
font-family: "Material Symbols Rounded";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
font-feature-settings: "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* Main entry point for all styles */
|
||||
@import "./fonts.css";
|
||||
@import "./base/reset.css";
|
||||
@import "./base/typography.css";
|
||||
@import "./base/scrollbar.css";
|
||||
@import "./themes/variables.css";
|
||||
@import "./themes/light.css";
|
||||
@import "./themes/dark.css";
|
||||
@import "./themes/editor-colors.css";
|
||||
@import "./components/emoji-picker.css";
|
||||
@import "./components/spinner.css";
|
||||
@import "./components/tags-input.css";
|
||||
@import "./components/utility-classes.css";
|
||||
@import "./components/react-day-picker.css";
|
||||
@import "./components/power-k.css";
|
||||
|
||||
/* Editor styles */
|
||||
@import "./editor/variables.css";
|
||||
@import "./editor/editor.css";
|
||||
@import "./editor/table.css";
|
||||
@import "./editor/github-dark.css";
|
||||
@import "./editor/drag-drop.css";
|
||||
@@ -0,0 +1,150 @@
|
||||
/* Dark Theme Styles */
|
||||
@layer base {
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark-contrast"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-primary-10: 8, 31, 43;
|
||||
--color-primary-20: 10, 37, 51;
|
||||
--color-primary-30: 13, 49, 69;
|
||||
--color-primary-40: 16, 58, 81;
|
||||
--color-primary-50: 18, 68, 94;
|
||||
--color-primary-60: 23, 86, 120;
|
||||
--color-primary-70: 28, 104, 146;
|
||||
--color-primary-80: 31, 116, 163;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 40, 146, 204;
|
||||
--color-primary-200: 41, 154, 214;
|
||||
--color-primary-300: 75, 170, 221;
|
||||
--color-primary-400: 109, 186, 227;
|
||||
--color-primary-500: 144, 202, 234;
|
||||
--color-primary-600: 169, 214, 239;
|
||||
--color-primary-700: 199, 229, 244;
|
||||
--color-primary-800: 216, 237, 248;
|
||||
--color-primary-900: 229, 243, 250;
|
||||
|
||||
--color-background-100: 25, 25, 25; /* primary bg */
|
||||
--color-background-90: 32, 32, 32; /* secondary bg */
|
||||
--color-background-80: 44, 44, 44; /* tertiary bg */
|
||||
|
||||
--color-background-primary: var(--color-background-90);
|
||||
--color-background-error: var(--color-background-90);
|
||||
|
||||
--color-text-primary: var(--color-primary-40);
|
||||
--color-text-error: var(--color-error-100);
|
||||
|
||||
--color-border-primary: var(--color-primary-200);
|
||||
--color-border-error: var(--color-error-500);
|
||||
|
||||
--color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
|
||||
/* Plane subscriptions */
|
||||
--color-subscription-free-200: 206, 213, 232;
|
||||
--color-subscription-free-400: 152, 166, 206;
|
||||
|
||||
--color-subscription-one-200: 255, 148, 153;
|
||||
--color-subscription-one-400: 200, 118, 121;
|
||||
|
||||
--color-subscription-pro-200: 12, 170, 192;
|
||||
--color-subscription-pro-400: 9, 130, 154;
|
||||
|
||||
--color-subscription-business-200: 206, 34, 119;
|
||||
--color-subscription-business-400: 140, 23, 81;
|
||||
|
||||
--color-subscription-enterprise-200: 182, 71, 255;
|
||||
--color-subscription-enterprise-400: 134, 11, 203;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-text-100: 229, 229, 229; /* primary text */
|
||||
--color-text-200: 163, 163, 163; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-350: 130, 130, 130;
|
||||
--color-text-400: 82, 82, 82; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 82, 82, 82; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
|
||||
|
||||
--color-onboarding-text-100: 237, 238, 240;
|
||||
--color-onboarding-text-200: 176, 180, 187;
|
||||
--color-onboarding-text-300: 118, 123, 132;
|
||||
--color-onboarding-text-400: 105, 110, 119;
|
||||
|
||||
--color-onboarding-background-100: 54, 58, 64;
|
||||
--color-onboarding-background-200: 40, 42, 45;
|
||||
--color-onboarding-background-300: 40, 42, 45;
|
||||
--color-onboarding-background-400: 67, 72, 79;
|
||||
|
||||
--color-onboarding-border-100: 54, 58, 64;
|
||||
--color-onboarding-border-200: 54, 58, 64;
|
||||
--color-onboarding-border-300: 34, 35, 38, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
}
|
||||
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-text-100: 250, 250, 250; /* primary text */
|
||||
--color-text-200: 241, 241, 241; /* secondary text */
|
||||
--color-text-300: 212, 212, 212; /* tertiary text */
|
||||
--color-text-350: 190, 190, 190;
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/* Editor and Sticky Note Colors */
|
||||
@layer base {
|
||||
:root {
|
||||
/* text colors */
|
||||
--editor-colors-gray-text: #5c5e63;
|
||||
--editor-colors-peach-text: #ff5b59;
|
||||
--editor-colors-pink-text: #f65385;
|
||||
--editor-colors-orange-text: #fd9038;
|
||||
--editor-colors-green-text: #0fc27b;
|
||||
--editor-colors-light-blue-text: #17bee9;
|
||||
--editor-colors-dark-blue-text: #266df0;
|
||||
--editor-colors-purple-text: #9162f9;
|
||||
/* end text colors */
|
||||
|
||||
/* background colors */
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
/* end background colors */
|
||||
}
|
||||
|
||||
/* background colors */
|
||||
[data-theme*="light"] {
|
||||
--editor-colors-gray-background: #d6d6d8;
|
||||
--editor-colors-peach-background: #ffd5d7;
|
||||
--editor-colors-pink-background: #fdd4e3;
|
||||
--editor-colors-orange-background: #ffe3cd;
|
||||
--editor-colors-green-background: #c3f0de;
|
||||
--editor-colors-light-blue-background: #c5eff9;
|
||||
--editor-colors-dark-blue-background: #c9dafb;
|
||||
--editor-colors-purple-background: #e3d8fd;
|
||||
}
|
||||
|
||||
[data-theme*="dark"] {
|
||||
--editor-colors-gray-background: #404144;
|
||||
--editor-colors-peach-background: #593032;
|
||||
--editor-colors-pink-background: #562e3d;
|
||||
--editor-colors-orange-background: #583e2a;
|
||||
--editor-colors-green-background: #1d4a3b;
|
||||
--editor-colors-light-blue-background: #1f495c;
|
||||
--editor-colors-dark-blue-background: #223558;
|
||||
--editor-colors-purple-background: #3d325a;
|
||||
}
|
||||
/* end background colors */
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* Light Theme Styles */
|
||||
@layer base {
|
||||
[data-theme="light"],
|
||||
[data-theme="light-contrast"] {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
|
||||
/* Plane subscriptions */
|
||||
--color-subscription-free-200: 69, 80, 104;
|
||||
--color-subscription-free-400: 51, 59, 77;
|
||||
|
||||
--color-subscription-one-200: 101, 42, 14;
|
||||
--color-subscription-one-400: 90, 37, 12;
|
||||
|
||||
--color-subscription-pro-200: 32, 128, 138;
|
||||
--color-subscription-pro-400: 24, 96, 104;
|
||||
|
||||
--color-subscription-business-200: 142, 33, 87;
|
||||
--color-subscription-business-400: 103, 24, 63;
|
||||
|
||||
--color-subscription-enterprise-200: 86, 5, 145;
|
||||
--color-subscription-enterprise-400: 73, 4, 123;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-350: 130, 130, 130;
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
|
||||
--gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
|
||||
--color-onboarding-text-100: 23, 23, 23;
|
||||
--color-onboarding-text-200: 58, 58, 58;
|
||||
--color-onboarding-text-300: 82, 82, 82;
|
||||
--color-onboarding-text-400: 163, 163, 163;
|
||||
|
||||
--color-onboarding-background-100: 236, 241, 255;
|
||||
--color-onboarding-background-200: 255, 255, 255;
|
||||
--color-onboarding-background-300: 236, 241, 255;
|
||||
--color-onboarding-background-400: 177, 206, 250;
|
||||
|
||||
--color-onboarding-border-100: 229, 229, 229;
|
||||
--color-onboarding-border-200: 217, 228, 255;
|
||||
--color-onboarding-border-300: 229, 229, 229, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 62, 155, 79;
|
||||
--color-toast-error-text: var(--color-error-200);
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 51, 88, 212;
|
||||
--color-toast-loading-text: 28, 32, 36;
|
||||
--color-toast-secondary-text: 128, 131, 141;
|
||||
--color-toast-tertiary-text: 96, 100, 108;
|
||||
|
||||
--color-toast-success-background: 253, 253, 254;
|
||||
--color-toast-error-background: var(--color-error-10);
|
||||
--color-toast-warning-background: 254, 253, 251;
|
||||
--color-toast-info-background: 253, 253, 254;
|
||||
--color-toast-loading-background: 253, 253, 254;
|
||||
|
||||
--color-toast-success-border: 218, 241, 219;
|
||||
--color-toast-error-border: var(--color-error-30);
|
||||
--color-toast-warning-border: 255, 247, 194;
|
||||
--color-toast-info-border: 210, 222, 255;
|
||||
--color-toast-loading-border: 224, 225, 230;
|
||||
}
|
||||
|
||||
[data-theme="light-contrast"] {
|
||||
--color-text-100: 11, 11, 11; /* primary text */
|
||||
--color-text-200: 38, 38, 38; /* secondary text */
|
||||
--color-text-300: 58, 58, 58; /* tertiary text */
|
||||
--color-text-350: 80, 80, 80;
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="dark"],
|
||||
[data-theme="light-contrast"],
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,470 @@
|
||||
/* CSS Custom Properties - Base Variables */
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: light !important;
|
||||
|
||||
/* Primary Colors */
|
||||
--color-primary-10: 229, 243, 250;
|
||||
--color-primary-20: 216, 237, 248;
|
||||
--color-primary-30: 199, 229, 244;
|
||||
--color-primary-40: 169, 214, 239;
|
||||
--color-primary-50: 144, 202, 234;
|
||||
--color-primary-60: 109, 186, 227;
|
||||
--color-primary-70: 75, 170, 221;
|
||||
--color-primary-80: 41, 154, 214;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 0, 99, 153;
|
||||
--color-primary-200: 0, 92, 143;
|
||||
--color-primary-300: 0, 86, 133;
|
||||
--color-primary-400: 0, 77, 117;
|
||||
--color-primary-500: 0, 66, 102;
|
||||
--color-primary-600: 0, 53, 82;
|
||||
--color-primary-700: 0, 43, 66;
|
||||
--color-primary-800: 0, 33, 51;
|
||||
--color-primary-900: 0, 23, 36;
|
||||
|
||||
/* Error Colors */
|
||||
--color-error-10: 255, 252, 252;
|
||||
--color-error-20: 255, 247, 247;
|
||||
--color-error-30: 255, 219, 220;
|
||||
--color-error-100: 244, 170, 170;
|
||||
--color-error-200: 220, 62, 62;
|
||||
--color-error-500: 140, 51, 58;
|
||||
|
||||
/* Background Colors */
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
--color-background-primary: var(--color-primary-10);
|
||||
--color-background-error: var(--color-error-20);
|
||||
|
||||
/* Text Colors */
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-350: 130, 130, 130;
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-text-primary: var(--color-primary-100);
|
||||
--color-text-error: var(--color-error-200);
|
||||
|
||||
/* Scrollbar */
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
/* Border Colors */
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
--color-border-primary: var(--color-primary-40);
|
||||
--color-border-error: var(--color-error-100);
|
||||
|
||||
/* Shadow Variables */
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.14);
|
||||
--color-shadow-xs:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 8px -1px rgba(16, 24, 40, 0.1);
|
||||
--color-shadow-sm:
|
||||
0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
|
||||
--color-shadow-rg:
|
||||
0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
|
||||
0px 1px 12px 0px rgba(16, 24, 40, 0.04);
|
||||
--color-shadow-md:
|
||||
0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-lg:
|
||||
0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 24px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
|
||||
0px 0px 52px 0px rgba(16, 24, 40, 0.16);
|
||||
--color-shadow-2xl:
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 32px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-3xl:
|
||||
0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 48px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
|
||||
--color-shadow-custom: 2px 2px 8px 2px rgba(234, 231, 250, 0.3);
|
||||
|
||||
/* Sidebar Colors */
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
|
||||
--color-sidebar-shadow-2xs: var(--color-shadow-2xs);
|
||||
--color-sidebar-shadow-xs: var(--color-shadow-xs);
|
||||
--color-sidebar-shadow-sm: var(--color-shadow-sm);
|
||||
--color-sidebar-shadow-rg: var(--color-shadow-rg);
|
||||
--color-sidebar-shadow-md: var(--color-shadow-md);
|
||||
--color-sidebar-shadow-lg: var(--color-shadow-lg);
|
||||
--color-sidebar-shadow-xl: var(--color-shadow-xl);
|
||||
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
|
||||
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
|
||||
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
|
||||
|
||||
/* PI Colors */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
|
||||
/* Plane Subscriptions */
|
||||
--color-subscription-free-200: 69, 80, 104;
|
||||
--color-subscription-free-400: 51, 59, 77;
|
||||
|
||||
--color-subscription-one-200: 101, 42, 14;
|
||||
--color-subscription-one-400: 90, 37, 12;
|
||||
|
||||
--color-subscription-pro-200: 32, 128, 138;
|
||||
--color-subscription-pro-400: 24, 96, 104;
|
||||
|
||||
--color-subscription-business-200: 142, 33, 87;
|
||||
--color-subscription-business-400: 103, 24, 63;
|
||||
|
||||
--color-subscription-enterprise-200: 86, 5, 145;
|
||||
--color-subscription-enterprise-400: 73, 4, 123;
|
||||
|
||||
/* Toast Theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
|
||||
/* Primitive Colors - Neutral Light */
|
||||
--neutral-light-100: 250, 250, 250;
|
||||
--neutral-light-200: 245, 245, 245;
|
||||
--neutral-light-300: 240, 240, 240;
|
||||
--neutral-light-400: 235, 235, 235;
|
||||
--neutral-light-500: 230, 230, 230;
|
||||
--neutral-light-600: 219, 219, 219;
|
||||
--neutral-light-700: 209, 209, 209;
|
||||
--neutral-light-800: 133, 133, 133;
|
||||
--neutral-light-900: 112, 112, 112;
|
||||
--neutral-light-1000: 87, 87, 87;
|
||||
--neutral-light-1100: 66, 66, 66;
|
||||
--neutral-light-1200: 31, 31, 31;
|
||||
|
||||
/* Primitive Colors - Neutral Dark */
|
||||
--neutral-dark-100: 23, 23, 23;
|
||||
--neutral-dark-200: 26, 26, 26;
|
||||
--neutral-dark-300: 31, 31, 31;
|
||||
--neutral-dark-400: 36, 36, 36;
|
||||
--neutral-dark-500: 46, 47, 48;
|
||||
--neutral-dark-600: 56, 56, 56;
|
||||
--neutral-dark-700: 71, 71, 71;
|
||||
--neutral-dark-800: 158, 158, 158;
|
||||
--neutral-dark-900: 173, 173, 173;
|
||||
--neutral-dark-1000: 189, 189, 189;
|
||||
--neutral-dark-1100: 204, 204, 204;
|
||||
--neutral-dark-1200: 230, 230, 230;
|
||||
|
||||
/* Primitive Colors - Brand Light */
|
||||
--brand-light-100: 249, 253, 255;
|
||||
--brand-light-200: 245, 251, 255;
|
||||
--brand-light-300: 235, 245, 255;
|
||||
--brand-light-400: 219, 237, 255;
|
||||
--brand-light-500: 196, 226, 255;
|
||||
--brand-light-600: 163, 209, 255;
|
||||
--brand-light-700: 122, 184, 255;
|
||||
--brand-light-default: 0, 153, 255;
|
||||
--brand-light-900: 0, 133, 217;
|
||||
--brand-light-1000: 0, 92, 153;
|
||||
--brand-light-1100: 0, 61, 102;
|
||||
--brand-light-1200: 0, 41, 68;
|
||||
|
||||
/* Primitive Colors - Brand Dark */
|
||||
--brand-dark-100: 8, 28, 43;
|
||||
--brand-dark-200: 13, 41, 61;
|
||||
--brand-dark-300: 20, 61, 92;
|
||||
--brand-dark-400: 33, 87, 133;
|
||||
--brand-dark-500: 38, 99, 153;
|
||||
--brand-dark-default: 61, 158, 245;
|
||||
--brand-dark-700: 102, 184, 255;
|
||||
--brand-dark-800: 143, 209, 255;
|
||||
--brand-dark-900: 184, 229, 255;
|
||||
--brand-dark-1000: 214, 241, 255;
|
||||
--brand-dark-1100: 235, 248, 255;
|
||||
--brand-dark-1200: 245, 252, 255;
|
||||
|
||||
/* Primitive Colors - Green Light */
|
||||
--green-light-100: 247, 254, 248;
|
||||
--green-light-200: 234, 250, 235;
|
||||
--green-light-300: 216, 244, 219;
|
||||
--green-light-400: 181, 231, 186;
|
||||
--green-light-500: 115, 245, 137;
|
||||
--green-light-600: 99, 230, 124;
|
||||
--green-light-700: 84, 212, 107;
|
||||
--green-light-800: 64, 191, 87;
|
||||
--green-light-900: 51, 163, 70;
|
||||
--green-light-1000: 47, 125, 63;
|
||||
--green-light-1100: 26, 71, 35;
|
||||
|
||||
/* Primitive Colors - Green Dark */
|
||||
--green-dark-100: 26, 71, 35;
|
||||
--green-dark-200: 47, 125, 63;
|
||||
--green-dark-300: 51, 163, 70;
|
||||
--green-dark-400: 64, 191, 87;
|
||||
--green-dark-500: 84, 212, 107;
|
||||
--green-dark-600: 99, 230, 124;
|
||||
--green-dark-700: 115, 245, 137;
|
||||
--green-dark-800: 181, 231, 186;
|
||||
--green-dark-900: 216, 244, 219;
|
||||
--green-dark-1000: 234, 250, 235;
|
||||
--green-dark-1100: 247, 254, 248;
|
||||
|
||||
/* Primitive Colors - Amber Light */
|
||||
--amber-light-100: 255, 251, 245;
|
||||
--amber-light-200: 255, 244, 227;
|
||||
--amber-light-300: 255, 232, 194;
|
||||
--amber-light-400: 255, 209, 150;
|
||||
--amber-light-500: 255, 191, 102;
|
||||
--amber-light-600: 255, 170, 51;
|
||||
--amber-light-700: 255, 150, 0;
|
||||
--amber-light-800: 230, 125, 0;
|
||||
--amber-light-900: 191, 102, 0;
|
||||
--amber-light-1000: 153, 82, 0;
|
||||
--amber-light-1100: 102, 54, 0;
|
||||
|
||||
/* Primitive Colors - Amber Dark */
|
||||
--amber-dark-100: 102, 54, 0;
|
||||
--amber-dark-200: 153, 82, 0;
|
||||
--amber-dark-300: 191, 102, 0;
|
||||
--amber-dark-400: 230, 125, 0;
|
||||
--amber-dark-500: 255, 150, 0;
|
||||
--amber-dark-600: 255, 170, 51;
|
||||
--amber-dark-700: 255, 191, 102;
|
||||
--amber-dark-800: 255, 209, 150;
|
||||
--amber-dark-900: 255, 232, 194;
|
||||
--amber-dark-1000: 255, 244, 227;
|
||||
--amber-dark-1100: 255, 251, 245;
|
||||
|
||||
/* Primitive Colors - Red Light */
|
||||
--red-light-100: 255, 247, 247;
|
||||
--red-light-200: 255, 240, 240;
|
||||
--red-light-300: 255, 227, 227;
|
||||
--red-light-400: 255, 209, 209;
|
||||
--red-light-500: 255, 179, 179;
|
||||
--red-light-600: 247, 148, 148;
|
||||
--red-light-700: 230, 115, 115;
|
||||
--red-light-800: 214, 97, 97;
|
||||
--red-light-900: 191, 84, 84;
|
||||
--red-light-1000: 163, 77, 77;
|
||||
--red-light-1100: 138, 64, 64;
|
||||
|
||||
/* Primitive Colors - Red Dark */
|
||||
--red-dark-100: 102, 41, 41;
|
||||
--red-dark-200: 163, 77, 77;
|
||||
--red-dark-300: 191, 84, 84;
|
||||
--red-dark-400: 214, 97, 97;
|
||||
--red-dark-500: 230, 115, 115;
|
||||
--red-dark-600: 247, 148, 148;
|
||||
--red-dark-700: 255, 179, 179;
|
||||
--red-dark-800: 255, 209, 209;
|
||||
--red-dark-900: 255, 227, 227;
|
||||
--red-dark-1000: 255, 240, 240;
|
||||
--red-dark-1100: 255, 247, 247;
|
||||
|
||||
/* Primitive Colors - Blue Light */
|
||||
--blue-light-100: 255, 247, 247;
|
||||
--blue-light-200: 255, 240, 240;
|
||||
--blue-light-300: 255, 227, 227;
|
||||
--blue-light-400: 255, 209, 209;
|
||||
--blue-light-500: 255, 179, 179;
|
||||
--blue-light-600: 247, 148, 148;
|
||||
--blue-light-700: 230, 115, 115;
|
||||
--blue-light-800: 214, 97, 97;
|
||||
--blue-light-900: 191, 84, 84;
|
||||
--blue-light-1000: 163, 77, 77;
|
||||
--blue-light-1100: 138, 64, 64;
|
||||
|
||||
/* Primitive Colors - Blue Dark */
|
||||
--blue-dark-100: 138, 64, 64;
|
||||
--blue-dark-200: 163, 77, 77;
|
||||
--blue-dark-300: 191, 84, 84;
|
||||
--blue-dark-400: 214, 97, 97;
|
||||
--blue-dark-500: 230, 115, 115;
|
||||
--blue-dark-600: 247, 148, 148;
|
||||
--blue-dark-700: 255, 179, 179;
|
||||
--blue-dark-800: 255, 209, 209;
|
||||
--blue-dark-900: 255, 227, 227;
|
||||
--blue-dark-1000: 255, 240, 240;
|
||||
--blue-dark-1100: 255, 247, 247;
|
||||
|
||||
/* Extended Palette - Purple */
|
||||
--extended-palette-purple-25: 254, 252, 255;
|
||||
--extended-palette-purple-50: 249, 245, 255;
|
||||
--extended-palette-purple-100: 241, 234, 255;
|
||||
--extended-palette-purple-200: 229, 219, 255;
|
||||
--extended-palette-purple-300: 217, 204, 255;
|
||||
--extended-palette-purple-400: 204, 189, 255;
|
||||
--extended-palette-purple-500: 192, 177, 255;
|
||||
--extended-palette-purple-600: 178, 163, 255;
|
||||
--extended-palette-purple-700: 142, 130, 204;
|
||||
--extended-palette-purple-800: 114, 104, 163;
|
||||
--extended-palette-purple-900: 79, 72, 112;
|
||||
--extended-palette-purple-950: 50, 45, 71;
|
||||
|
||||
/* Extended Palette - Crimson */
|
||||
--extended-palette-crimson-25: 255, 251, 250;
|
||||
--extended-palette-crimson-50: 255, 242, 237;
|
||||
--extended-palette-crimson-100: 255, 223, 214;
|
||||
--extended-palette-crimson-200: 255, 198, 181;
|
||||
--extended-palette-crimson-300: 255, 173, 148;
|
||||
--extended-palette-crimson-400: 255, 148, 115;
|
||||
--extended-palette-crimson-500: 237, 123, 90;
|
||||
--extended-palette-crimson-600: 209, 100, 71;
|
||||
--extended-palette-crimson-700: 181, 83, 59;
|
||||
--extended-palette-crimson-800: 153, 70, 50;
|
||||
--extended-palette-crimson-900: 107, 49, 35;
|
||||
--extended-palette-crimson-950: 69, 32, 23;
|
||||
|
||||
/* Extended Palette - Pink */
|
||||
--extended-palette-pink-25: 255, 250, 253;
|
||||
--extended-palette-pink-50: 252, 240, 249;
|
||||
--extended-palette-pink-100: 249, 224, 243;
|
||||
--extended-palette-pink-200: 243, 198, 232;
|
||||
--extended-palette-pink-300: 237, 173, 220;
|
||||
--extended-palette-pink-400: 232, 148, 209;
|
||||
--extended-palette-pink-500: 226, 128, 199;
|
||||
--extended-palette-pink-600: 220, 107, 188;
|
||||
--extended-palette-pink-700: 176, 86, 150;
|
||||
--extended-palette-pink-800: 141, 69, 120;
|
||||
--extended-palette-pink-900: 98, 48, 84;
|
||||
--extended-palette-pink-950: 63, 31, 54;
|
||||
|
||||
/* Extended Palette - Yellow */
|
||||
--extended-palette-yellow-25: 255, 253, 250;
|
||||
--extended-palette-yellow-50: 255, 249, 237;
|
||||
--extended-palette-yellow-100: 255, 241, 219;
|
||||
--extended-palette-yellow-200: 255, 229, 184;
|
||||
--extended-palette-yellow-300: 255, 217, 148;
|
||||
--extended-palette-yellow-400: 255, 205, 112;
|
||||
--extended-palette-yellow-500: 255, 195, 84;
|
||||
--extended-palette-yellow-600: 255, 183, 48;
|
||||
--extended-palette-yellow-700: 255, 174, 28;
|
||||
--extended-palette-yellow-800: 204, 139, 23;
|
||||
--extended-palette-yellow-900: 140, 96, 16;
|
||||
--extended-palette-yellow-950: 89, 61, 10;
|
||||
|
||||
/* Extended Palette - Grey */
|
||||
--extended-palette-grey-25: 250, 250, 250;
|
||||
--extended-palette-grey-50: 237, 237, 237;
|
||||
--extended-palette-grey-100: 224, 224, 224;
|
||||
--extended-palette-grey-200: 199, 199, 199;
|
||||
--extended-palette-grey-300: 179, 179, 179;
|
||||
--extended-palette-grey-400: 158, 158, 158;
|
||||
--extended-palette-grey-500: 143, 143, 143;
|
||||
--extended-palette-grey-600: 128, 128, 128;
|
||||
--extended-palette-grey-700: 105, 105, 105;
|
||||
--extended-palette-grey-800: 82, 82, 82;
|
||||
--extended-palette-grey-900: 56, 56, 56;
|
||||
--extended-palette-grey-950: 36, 36, 36;
|
||||
|
||||
/* Extended Palette - Indigo */
|
||||
--extended-palette-indigo-25: 250, 251, 255;
|
||||
--extended-palette-indigo-50: 240, 244, 255;
|
||||
--extended-palette-indigo-100: 224, 232, 255;
|
||||
--extended-palette-indigo-200: 199, 214, 255;
|
||||
--extended-palette-indigo-300: 173, 196, 255;
|
||||
--extended-palette-indigo-400: 148, 178, 255;
|
||||
--extended-palette-indigo-500: 128, 163, 255;
|
||||
--extended-palette-indigo-600: 107, 148, 255;
|
||||
--extended-palette-indigo-700: 86, 118, 204;
|
||||
--extended-palette-indigo-800: 69, 95, 163;
|
||||
--extended-palette-indigo-900: 48, 66, 112;
|
||||
--extended-palette-indigo-950: 31, 42, 71;
|
||||
|
||||
/* Extended Palette - Emerald */
|
||||
--extended-palette-emerald-25: 250, 255, 251;
|
||||
--extended-palette-emerald-50: 237, 252, 240;
|
||||
--extended-palette-emerald-100: 219, 247, 224;
|
||||
--extended-palette-emerald-200: 184, 238, 199;
|
||||
--extended-palette-emerald-300: 148, 229, 173;
|
||||
--extended-palette-emerald-400: 112, 219, 148;
|
||||
--extended-palette-emerald-500: 84, 209, 128;
|
||||
--extended-palette-emerald-600: 56, 199, 107;
|
||||
--extended-palette-emerald-700: 45, 163, 88;
|
||||
--extended-palette-emerald-800: 36, 130, 70;
|
||||
--extended-palette-emerald-900: 25, 89, 48;
|
||||
--extended-palette-emerald-950: 16, 57, 31;
|
||||
|
||||
/* Extended Palette - Orange */
|
||||
--extended-palette-orange-25: 255, 251, 250;
|
||||
--extended-palette-orange-50: 255, 245, 242;
|
||||
--extended-palette-orange-100: 255, 232, 224;
|
||||
--extended-palette-orange-200: 255, 209, 199;
|
||||
--extended-palette-orange-300: 255, 186, 173;
|
||||
--extended-palette-orange-400: 255, 163, 148;
|
||||
--extended-palette-orange-500: 255, 143, 128;
|
||||
--extended-palette-orange-600: 255, 120, 107;
|
||||
--extended-palette-orange-700: 255, 97, 84;
|
||||
--extended-palette-orange-800: 204, 78, 67;
|
||||
--extended-palette-orange-900: 140, 54, 46;
|
||||
--extended-palette-orange-950: 89, 34, 29;
|
||||
|
||||
/* Extended Palette - Sun */
|
||||
--extended-palette-sun-25: 253, 254, 245;
|
||||
--extended-palette-sun-50: 249, 252, 227;
|
||||
--extended-palette-sun-100: 246, 250, 214;
|
||||
--extended-palette-sun-200: 240, 246, 194;
|
||||
--extended-palette-sun-300: 229, 238, 163;
|
||||
--extended-palette-sun-400: 221, 231, 143;
|
||||
--extended-palette-sun-500: 208, 219, 117;
|
||||
--extended-palette-sun-600: 189, 200, 92;
|
||||
--extended-palette-sun-700: 161, 170, 66;
|
||||
--extended-palette-sun-800: 124, 131, 41;
|
||||
--extended-palette-sun-900: 77, 81, 20;
|
||||
--extended-palette-sun-950: 41, 43, 10;
|
||||
|
||||
/* Extended Palette - Atmos */
|
||||
--extended-palette-atmos-25: 253, 245, 255;
|
||||
--extended-palette-atmos-50: 249, 227, 255;
|
||||
--extended-palette-atmos-100: 246, 214, 255;
|
||||
--extended-palette-atmos-200: 240, 194, 255;
|
||||
--extended-palette-atmos-300: 229, 163, 255;
|
||||
--extended-palette-atmos-400: 221, 143, 255;
|
||||
--extended-palette-atmos-500: 208, 117, 255;
|
||||
--extended-palette-atmos-600: 189, 92, 255;
|
||||
--extended-palette-atmos-700: 161, 66, 217;
|
||||
--extended-palette-atmos-800: 124, 41, 168;
|
||||
--extended-palette-atmos-900: 77, 20, 105;
|
||||
--extended-palette-atmos-950: 41, 10, 56;
|
||||
}
|
||||
}
|
||||
@@ -1,492 +1,58 @@
|
||||
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
|
||||
const convertToRGBA = (variableName, alpha) =>
|
||||
`rgba(var(${variableName}), ${alpha})`;
|
||||
/**
|
||||
* Tailwind CSS Configuration
|
||||
* Modular configuration split into focused files for better maintainability
|
||||
*/
|
||||
|
||||
// Import configuration modules
|
||||
const content = require("./config/content");
|
||||
const colors = require("./config/colors");
|
||||
const shadows = require("./config/shadows");
|
||||
const spacing = require("./config/spacing");
|
||||
const typography = require("./config/typography");
|
||||
const animations = require("./config/animations");
|
||||
const layout = require("./config/layout");
|
||||
const plugins = require("./config/plugins");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
content: {
|
||||
relative: true,
|
||||
files: [
|
||||
"./app/**/*.{js,ts,jsx,tsx}",
|
||||
"./core/**/*.{js,ts,jsx,tsx}",
|
||||
"./ce/**/*.{js,ts,jsx,tsx}",
|
||||
"./ee/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.tsx",
|
||||
"./constants/**/*.{js,ts,jsx,tsx}",
|
||||
"./layouts/**/*.tsx",
|
||||
"./pages/**/*.tsx",
|
||||
"./app/**/*.tsx",
|
||||
"./ui/**/*.tsx",
|
||||
"../../packages/ui/src/**/*.{js,ts,jsx,tsx}",
|
||||
"../../packages/propel/src/**/*.{js,ts,jsx,tsx}",
|
||||
"../../packages/editor/src/**/*.{js,ts,jsx,tsx}",
|
||||
"!../../packages/ui/**/*.stories{js,ts,jsx,tsx}",
|
||||
],
|
||||
},
|
||||
content,
|
||||
theme: {
|
||||
extend: {
|
||||
boxShadow: {
|
||||
"custom-shadow": "var(--color-shadow-custom)",
|
||||
"custom-shadow-2xs": "var(--color-shadow-2xs)",
|
||||
"custom-shadow-xs": "var(--color-shadow-xs)",
|
||||
"custom-shadow-sm": "var(--color-shadow-sm)",
|
||||
"custom-shadow-rg": "var(--color-shadow-rg)",
|
||||
"custom-shadow-md": "var(--color-shadow-md)",
|
||||
"custom-shadow-lg": "var(--color-shadow-lg)",
|
||||
"custom-shadow-xl": "var(--color-shadow-xl)",
|
||||
"custom-shadow-2xl": "var(--color-shadow-2xl)",
|
||||
"custom-shadow-3xl": "var(--color-shadow-3xl)",
|
||||
"custom-shadow-4xl": "var(--color-shadow-4xl)",
|
||||
"custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
|
||||
"custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
|
||||
"custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
|
||||
"custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
|
||||
"custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
|
||||
"custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
|
||||
"custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
|
||||
"custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
|
||||
"custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
|
||||
"custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
|
||||
},
|
||||
colors: {
|
||||
custom: {
|
||||
primary: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-primary-10"),
|
||||
20: convertToRGB("--color-primary-20"),
|
||||
30: convertToRGB("--color-primary-30"),
|
||||
40: convertToRGB("--color-primary-40"),
|
||||
50: convertToRGB("--color-primary-50"),
|
||||
60: convertToRGB("--color-primary-60"),
|
||||
70: convertToRGB("--color-primary-70"),
|
||||
80: convertToRGB("--color-primary-80"),
|
||||
90: convertToRGB("--color-primary-90"),
|
||||
100: convertToRGB("--color-primary-100"),
|
||||
200: convertToRGB("--color-primary-200"),
|
||||
300: convertToRGB("--color-primary-300"),
|
||||
400: convertToRGB("--color-primary-400"),
|
||||
500: convertToRGB("--color-primary-500"),
|
||||
600: convertToRGB("--color-primary-600"),
|
||||
700: convertToRGB("--color-primary-700"),
|
||||
800: convertToRGB("--color-primary-800"),
|
||||
900: convertToRGB("--color-primary-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-primary-100"),
|
||||
},
|
||||
background: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-background-10"),
|
||||
20: convertToRGB("--color-background-20"),
|
||||
30: convertToRGB("--color-background-30"),
|
||||
40: convertToRGB("--color-background-40"),
|
||||
50: convertToRGB("--color-background-50"),
|
||||
60: convertToRGB("--color-background-60"),
|
||||
70: convertToRGB("--color-background-70"),
|
||||
80: convertToRGB("--color-background-80"),
|
||||
90: convertToRGB("--color-background-90"),
|
||||
100: convertToRGB("--color-background-100"),
|
||||
200: convertToRGB("--color-background-200"),
|
||||
300: convertToRGB("--color-background-300"),
|
||||
400: convertToRGB("--color-background-400"),
|
||||
500: convertToRGB("--color-background-500"),
|
||||
600: convertToRGB("--color-background-600"),
|
||||
700: convertToRGB("--color-background-700"),
|
||||
800: convertToRGB("--color-background-800"),
|
||||
900: convertToRGB("--color-background-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
overlay: convertToRGBA("--color-background-80", 0.95),
|
||||
primary: convertToRGB(" --color-background-primary"),
|
||||
error: convertToRGB(" --color-background-error"),
|
||||
DEFAULT: convertToRGB("--color-background-100"),
|
||||
},
|
||||
text: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-text-10"),
|
||||
20: convertToRGB("--color-text-20"),
|
||||
30: convertToRGB("--color-text-30"),
|
||||
40: convertToRGB("--color-text-40"),
|
||||
50: convertToRGB("--color-text-50"),
|
||||
60: convertToRGB("--color-text-60"),
|
||||
70: convertToRGB("--color-text-70"),
|
||||
80: convertToRGB("--color-text-80"),
|
||||
90: convertToRGB("--color-text-90"),
|
||||
100: convertToRGB("--color-text-100"),
|
||||
200: convertToRGB("--color-text-200"),
|
||||
300: convertToRGB("--color-text-300"),
|
||||
350: convertToRGB("--color-text-350"),
|
||||
400: convertToRGB("--color-text-400"),
|
||||
500: convertToRGB("--color-text-500"),
|
||||
600: convertToRGB("--color-text-600"),
|
||||
700: convertToRGB("--color-text-700"),
|
||||
800: convertToRGB("--color-text-800"),
|
||||
900: convertToRGB("--color-text-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
primary: convertToRGB("--color-text-primary"),
|
||||
error: convertToRGB("--color-text-error"),
|
||||
DEFAULT: convertToRGB("--color-text-100"),
|
||||
},
|
||||
border: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
100: convertToRGB("--color-border-100"),
|
||||
200: convertToRGB("--color-border-200"),
|
||||
300: convertToRGB("--color-border-300"),
|
||||
400: convertToRGB("--color-border-400"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
primary: convertToRGB("--color-border-primary"),
|
||||
error: convertToRGB("--color-border-error"),
|
||||
DEFAULT: convertToRGB("--color-border-200"),
|
||||
},
|
||||
error: {
|
||||
10: convertToRGB("--color-error-10"),
|
||||
20: convertToRGB("--color-error-20"),
|
||||
30: convertToRGB("--color-error-30"),
|
||||
100: convertToRGB("--color-error-100"),
|
||||
200: convertToRGB("--color-error-200"),
|
||||
500: convertToRGB("--color-error-500"),
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-sidebar-background-10"),
|
||||
20: convertToRGB("--color-sidebar-background-20"),
|
||||
30: convertToRGB("--color-sidebar-background-30"),
|
||||
40: convertToRGB("--color-sidebar-background-40"),
|
||||
50: convertToRGB("--color-sidebar-background-50"),
|
||||
60: convertToRGB("--color-sidebar-background-60"),
|
||||
70: convertToRGB("--color-sidebar-background-70"),
|
||||
80: convertToRGB("--color-sidebar-background-80"),
|
||||
90: convertToRGB("--color-sidebar-background-90"),
|
||||
100: convertToRGB("--color-sidebar-background-100"),
|
||||
200: convertToRGB("--color-sidebar-background-200"),
|
||||
300: convertToRGB("--color-sidebar-background-300"),
|
||||
400: convertToRGB("--color-sidebar-background-400"),
|
||||
500: convertToRGB("--color-sidebar-background-500"),
|
||||
600: convertToRGB("--color-sidebar-background-600"),
|
||||
700: convertToRGB("--color-sidebar-background-700"),
|
||||
800: convertToRGB("--color-sidebar-background-800"),
|
||||
900: convertToRGB("--color-sidebar-background-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-background-100"),
|
||||
},
|
||||
text: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
10: convertToRGB("--color-sidebar-text-10"),
|
||||
20: convertToRGB("--color-sidebar-text-20"),
|
||||
30: convertToRGB("--color-sidebar-text-30"),
|
||||
40: convertToRGB("--color-sidebar-text-40"),
|
||||
50: convertToRGB("--color-sidebar-text-50"),
|
||||
60: convertToRGB("--color-sidebar-text-60"),
|
||||
70: convertToRGB("--color-sidebar-text-70"),
|
||||
80: convertToRGB("--color-sidebar-text-80"),
|
||||
90: convertToRGB("--color-sidebar-text-90"),
|
||||
100: convertToRGB("--color-sidebar-text-100"),
|
||||
200: convertToRGB("--color-sidebar-text-200"),
|
||||
300: convertToRGB("--color-sidebar-text-300"),
|
||||
400: convertToRGB("--color-sidebar-text-400"),
|
||||
500: convertToRGB("--color-sidebar-text-500"),
|
||||
600: convertToRGB("--color-sidebar-text-600"),
|
||||
700: convertToRGB("--color-sidebar-text-700"),
|
||||
800: convertToRGB("--color-sidebar-text-800"),
|
||||
900: convertToRGB("--color-sidebar-text-900"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-text-100"),
|
||||
},
|
||||
border: {
|
||||
0: "rgb(255, 255, 255)",
|
||||
100: convertToRGB("--color-sidebar-border-100"),
|
||||
200: convertToRGB("--color-sidebar-border-200"),
|
||||
300: convertToRGB("--color-sidebar-border-300"),
|
||||
400: convertToRGB("--color-sidebar-border-400"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-border-200"),
|
||||
},
|
||||
},
|
||||
backdrop: "rgba(0, 0, 0, 0.25)",
|
||||
scrollbar: {
|
||||
neutral: "rgba(96, 100, 108, 0.1)",
|
||||
hover: "rgba(96, 100, 108, 0.25)",
|
||||
active: "rgba(96, 100, 108, 0.7)",
|
||||
},
|
||||
subscription: {
|
||||
free: {
|
||||
200: convertToRGB("--color-subscription-free-200"),
|
||||
400: convertToRGB("--color-subscription-free-400"),
|
||||
},
|
||||
one: {
|
||||
200: convertToRGB("--color-subscription-one-200"),
|
||||
400: convertToRGB("--color-subscription-one-400"),
|
||||
},
|
||||
pro: {
|
||||
200: convertToRGB("--color-subscription-pro-200"),
|
||||
400: convertToRGB("--color-subscription-pro-400"),
|
||||
},
|
||||
business: {
|
||||
200: convertToRGB("--color-subscription-business-200"),
|
||||
400: convertToRGB("--color-subscription-business-400"),
|
||||
},
|
||||
enterprise: {
|
||||
200: convertToRGB("--color-subscription-enterprise-200"),
|
||||
400: convertToRGB("--color-subscription-enterprise-400"),
|
||||
},
|
||||
},
|
||||
},
|
||||
toast: {
|
||||
text: {
|
||||
success: convertToRGB("--color-toast-success-text"),
|
||||
error: convertToRGB("--color-toast-error-text"),
|
||||
warning: convertToRGB("--color-toast-warning-text"),
|
||||
info: convertToRGB("--color-toast-info-text"),
|
||||
loading: convertToRGB("--color-toast-loading-text"),
|
||||
secondary: convertToRGB("--color-toast-secondary-text"),
|
||||
tertiary: convertToRGB("--color-toast-tertiary-text"),
|
||||
},
|
||||
background: {
|
||||
success: convertToRGB("--color-toast-success-background"),
|
||||
error: convertToRGB("--color-toast-error-background"),
|
||||
warning: convertToRGB("--color-toast-warning-background"),
|
||||
info: convertToRGB("--color-toast-info-background"),
|
||||
loading: convertToRGB("--color-toast-loading-background"),
|
||||
},
|
||||
border: {
|
||||
success: convertToRGB("--color-toast-success-border"),
|
||||
error: convertToRGB("--color-toast-error-border"),
|
||||
warning: convertToRGB("--color-toast-warning-border"),
|
||||
info: convertToRGB("--color-toast-info-border"),
|
||||
loading: convertToRGB("--color-toast-loading-border"),
|
||||
},
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
leftToaster: {
|
||||
"0%": { left: "-20rem" },
|
||||
"100%": { left: "0" },
|
||||
},
|
||||
rightToaster: {
|
||||
"0%": { right: "-20rem" },
|
||||
"100%": { right: "0" },
|
||||
},
|
||||
"bar-loader": {
|
||||
from: { left: "-100%" },
|
||||
to: { left: "100%" },
|
||||
},
|
||||
},
|
||||
typography: () => ({
|
||||
brand: {
|
||||
css: {
|
||||
"--tw-prose-body": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-p": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-headings": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-lead": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-links": convertToRGB("--color-primary-100"),
|
||||
"--tw-prose-bold": "inherit",
|
||||
"--tw-prose-counters": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-bullets": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-hr": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-quotes": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-quote-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-code": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-pre-code": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-pre-bg": convertToRGB("--color-background-100"),
|
||||
"--tw-prose-th-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-td-borders": convertToRGB("--color-border-200"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
screens: {
|
||||
"3xl": "1792px",
|
||||
},
|
||||
// scale down font sizes to 90% of default
|
||||
fontSize: {
|
||||
"2xs": "0.5625rem",
|
||||
xs: "0.675rem",
|
||||
sm: "0.7875rem",
|
||||
base: "0.9rem",
|
||||
lg: "1.0125rem",
|
||||
xl: "1.125rem",
|
||||
"2xl": "1.35rem",
|
||||
"3xl": "1.6875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "2.7rem",
|
||||
"6xl": "3.375rem",
|
||||
"7xl": "4.05rem",
|
||||
"8xl": "5.4rem",
|
||||
"9xl": "7.2rem",
|
||||
},
|
||||
// scale down spacing to 90% of default
|
||||
padding: {
|
||||
0: "0",
|
||||
0.5: "0.1125rem",
|
||||
1: "0.225rem",
|
||||
1.5: "0.3375rem",
|
||||
2: "0.45rem",
|
||||
2.5: "0.5625rem",
|
||||
3: "0.675rem",
|
||||
3.5: "0.7875rem",
|
||||
4: "0.9rem",
|
||||
5: "1.125rem",
|
||||
6: "1.35rem",
|
||||
7: "1.575rem",
|
||||
8: "1.8rem",
|
||||
9: "2.025rem",
|
||||
10: "2.25rem",
|
||||
11: "2.475rem",
|
||||
12: "2.7rem",
|
||||
16: "3.6rem",
|
||||
20: "4.5rem",
|
||||
24: "5.4rem",
|
||||
32: "7.2rem",
|
||||
40: "9rem",
|
||||
48: "10.8rem",
|
||||
56: "12.6rem",
|
||||
64: "14.4rem",
|
||||
72: "16.2rem",
|
||||
80: "18rem",
|
||||
96: "21.6rem",
|
||||
"page-x": "1.35rem",
|
||||
"page-y": "1.35rem",
|
||||
},
|
||||
margin: {
|
||||
0: "0",
|
||||
0.5: "0.1125rem",
|
||||
1: "0.225rem",
|
||||
1.5: "0.3375rem",
|
||||
2: "0.45rem",
|
||||
2.5: "0.5625rem",
|
||||
3: "0.675rem",
|
||||
3.5: "0.7875rem",
|
||||
4: "0.9rem",
|
||||
5: "1.125rem",
|
||||
6: "1.35rem",
|
||||
7: "1.575rem",
|
||||
8: "1.8rem",
|
||||
9: "2.025rem",
|
||||
10: "2.25rem",
|
||||
11: "2.475rem",
|
||||
12: "2.7rem",
|
||||
16: "3.6rem",
|
||||
20: "4.5rem",
|
||||
24: "5.4rem",
|
||||
32: "7.2rem",
|
||||
40: "9rem",
|
||||
48: "10.8rem",
|
||||
56: "12.6rem",
|
||||
64: "14.4rem",
|
||||
72: "16.2rem",
|
||||
80: "18rem",
|
||||
96: "21.6rem",
|
||||
},
|
||||
height: {
|
||||
header: "3.25rem",
|
||||
},
|
||||
space: {
|
||||
0: "0",
|
||||
0.5: "0.1125rem",
|
||||
1: "0.225rem",
|
||||
1.5: "0.3375rem",
|
||||
2: "0.45rem",
|
||||
2.5: "0.5625rem",
|
||||
3: "0.675rem",
|
||||
3.5: "0.7875rem",
|
||||
4: "0.9rem",
|
||||
5: "1.125rem",
|
||||
6: "1.35rem",
|
||||
7: "1.575rem",
|
||||
8: "1.8rem",
|
||||
9: "2.025rem",
|
||||
10: "2.25rem",
|
||||
11: "2.475rem",
|
||||
12: "2.7rem",
|
||||
16: "3.6rem",
|
||||
20: "4.5rem",
|
||||
24: "5.4rem",
|
||||
32: "7.2rem",
|
||||
40: "9rem",
|
||||
48: "10.8rem",
|
||||
56: "12.6rem",
|
||||
64: "14.4rem",
|
||||
72: "16.2rem",
|
||||
80: "18rem",
|
||||
96: "21.6rem",
|
||||
},
|
||||
gap: {
|
||||
0: "0",
|
||||
0.5: "0.1125rem",
|
||||
1: "0.225rem",
|
||||
1.5: "0.3375rem",
|
||||
2: "0.45rem",
|
||||
2.5: "0.5625rem",
|
||||
3: "0.675rem",
|
||||
3.5: "0.7875rem",
|
||||
4: "0.9rem",
|
||||
5: "1.125rem",
|
||||
6: "1.35rem",
|
||||
7: "1.575rem",
|
||||
8: "1.8rem",
|
||||
9: "2.025rem",
|
||||
10: "2.25rem",
|
||||
11: "2.475rem",
|
||||
12: "2.7rem",
|
||||
16: "3.6rem",
|
||||
20: "4.5rem",
|
||||
24: "5.4rem",
|
||||
32: "7.2rem",
|
||||
40: "9rem",
|
||||
48: "10.8rem",
|
||||
56: "12.6rem",
|
||||
64: "14.4rem",
|
||||
72: "16.2rem",
|
||||
80: "18rem",
|
||||
96: "21.6rem",
|
||||
},
|
||||
fontFamily: {
|
||||
custom: ["Inter", "sans-serif"],
|
||||
},
|
||||
zIndex: {
|
||||
base: 0 /* default content */,
|
||||
header: 10 /* sticky headers, navbars */,
|
||||
sidebar: 20 /* sidebars, drawers */,
|
||||
dropdown: 30 /* dropdowns, select menus */,
|
||||
popover: 40 /* popovers, hovercards */,
|
||||
tooltip: 50 /* tooltips, hints */,
|
||||
sticky: 60 /* sticky UI */,
|
||||
backdrop: 90 /* backdrop / overlay */,
|
||||
modal: 100 /* dialogs, modals */,
|
||||
toast: 110 /* toast, alerts */,
|
||||
loader: 120 /* blocking loader/spinner */,
|
||||
max: 9999 /* emergency override (rare use) */,
|
||||
// Colors
|
||||
colors,
|
||||
|
||||
// Shadows
|
||||
boxShadow: shadows,
|
||||
|
||||
// Spacing
|
||||
padding: spacing.padding,
|
||||
margin: spacing.margin,
|
||||
gap: spacing.gap,
|
||||
space: spacing.space,
|
||||
|
||||
// Typography
|
||||
fontSize: typography.fontSize,
|
||||
fontFamily: typography.fontFamily,
|
||||
typography: typography.typography,
|
||||
|
||||
// Animations
|
||||
keyframes: animations,
|
||||
animation: {
|
||||
// Web app animations
|
||||
"slide-up": "slide-up 0.3s ease-out forwards",
|
||||
"text-slide-in": "textSlideIn 400ms ease-out forwards",
|
||||
"text-fade-out": "textFadeOut 600ms ease-in 300ms forwards",
|
||||
"lock-icon": "lockIconAnimation 600ms ease-out forwards",
|
||||
"unlock-icon": "unlockIconAnimation 600ms ease-out forwards",
|
||||
"fade-out": "fadeOut 500ms ease-in 100ms forwards",
|
||||
},
|
||||
|
||||
// Layout
|
||||
zIndex: layout.zIndex,
|
||||
screens: layout.screens,
|
||||
height: layout.height,
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("tailwindcss-animate"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("@tailwindcss/container-queries"),
|
||||
function ({ addUtilities }) {
|
||||
const newUtilities = {
|
||||
// Mobile screens
|
||||
".px-page-x": {
|
||||
paddingLeft: "1.25rem",
|
||||
paddingRight: "1.25rem",
|
||||
},
|
||||
// Medium screens (768px and up)
|
||||
"@media (min-width: 768px)": {
|
||||
".px-page-x": {
|
||||
paddingLeft: "1.35rem",
|
||||
paddingRight: "1.35rem",
|
||||
},
|
||||
},
|
||||
// Hide scrollbar but keep functionality
|
||||
".scrollbar-hide": {
|
||||
"-ms-overflow-style": "none" /* IE and Edge */,
|
||||
"scrollbar-width": "none" /* Firefox */,
|
||||
"&::-webkit-scrollbar": {
|
||||
display: "none" /* Chrome, Safari and Opera */,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
addUtilities(newUtilities, ["responsive"]);
|
||||
},
|
||||
],
|
||||
plugins,
|
||||
};
|
||||
|
||||
@@ -1,696 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.text-1\.5xl {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
.text-2\.5xl {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-primary-10: 229, 243, 250;
|
||||
--color-primary-20: 216, 237, 248;
|
||||
--color-primary-30: 199, 229, 244;
|
||||
--color-primary-40: 169, 214, 239;
|
||||
--color-primary-50: 144, 202, 234;
|
||||
--color-primary-60: 109, 186, 227;
|
||||
--color-primary-70: 75, 170, 221;
|
||||
--color-primary-80: 41, 154, 214;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 0, 99, 153;
|
||||
--color-primary-200: 0, 92, 143;
|
||||
--color-primary-300: 0, 86, 133;
|
||||
--color-primary-400: 0, 77, 117;
|
||||
--color-primary-500: 0, 66, 102;
|
||||
--color-primary-600: 0, 53, 82;
|
||||
--color-primary-700: 0, 43, 66;
|
||||
--color-primary-800: 0, 33, 51;
|
||||
--color-primary-900: 0, 23, 36;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
--color-shadow-2xs:
|
||||
0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
|
||||
0px 1px 2px 0px rgba(23, 23, 23, 0.14);
|
||||
--color-shadow-xs:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 8px -1px rgba(16, 24, 40, 0.1);
|
||||
--color-shadow-sm:
|
||||
0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
|
||||
--color-shadow-rg:
|
||||
0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
|
||||
0px 1px 12px 0px rgba(16, 24, 40, 0.04);
|
||||
--color-shadow-md:
|
||||
0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-lg:
|
||||
0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 24px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-xl:
|
||||
0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
|
||||
0px 0px 52px 0px rgba(16, 24, 40, 0.16);
|
||||
--color-shadow-2xl:
|
||||
0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
|
||||
0px 1px 32px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-3xl:
|
||||
0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 1px 48px 0px rgba(16, 24, 40, 0.12);
|
||||
--color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
|
||||
--color-sidebar-shadow-2xs: var(--color-shadow-2xs);
|
||||
--color-sidebar-shadow-xs: var(--color-shadow-xs);
|
||||
--color-sidebar-shadow-sm: var(--color-shadow-sm);
|
||||
--color-sidebar-shadow-rg: var(--color-shadow-rg);
|
||||
--color-sidebar-shadow-md: var(--color-shadow-md);
|
||||
--color-sidebar-shadow-lg: var(--color-shadow-lg);
|
||||
--color-sidebar-shadow-xl: var(--color-shadow-xl);
|
||||
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
|
||||
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
|
||||
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="light-contrast"] {
|
||||
color-scheme: light !important;
|
||||
|
||||
--color-background-100: 255, 255, 255; /* primary bg */
|
||||
--color-background-90: 247, 247, 247; /* secondary bg */
|
||||
--color-background-80: 232, 232, 232; /* tertiary bg */
|
||||
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-text-100: 23, 23, 23; /* primary text */
|
||||
--color-text-200: 58, 58, 58; /* secondary text */
|
||||
--color-text-300: 82, 82, 82; /* tertiary text */
|
||||
--color-text-400: 163, 163, 163; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 163, 163, 163; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
|
||||
--gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||
|
||||
--color-onboarding-text-100: 23, 23, 23;
|
||||
--color-onboarding-text-200: 58, 58, 58;
|
||||
--color-onboarding-text-300: 82, 82, 82;
|
||||
--color-onboarding-text-400: 163, 163, 163;
|
||||
|
||||
--color-onboarding-background-100: 236, 241, 255;
|
||||
--color-onboarding-background-200: 255, 255, 255;
|
||||
--color-onboarding-background-300: 236, 241, 255;
|
||||
--color-onboarding-background-400: 177, 206, 250;
|
||||
|
||||
--color-onboarding-border-100: 229, 229, 229;
|
||||
--color-onboarding-border-200: 217, 228, 255;
|
||||
--color-onboarding-border-300: 229, 229, 229, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 62, 155, 79;
|
||||
--color-toast-error-text: 220, 62, 66;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 51, 88, 212;
|
||||
--color-toast-loading-text: 28, 32, 36;
|
||||
--color-toast-secondary-text: 128, 131, 141;
|
||||
--color-toast-tertiary-text: 96, 100, 108;
|
||||
|
||||
--color-toast-success-background: 253, 253, 254;
|
||||
--color-toast-error-background: 255, 252, 252;
|
||||
--color-toast-warning-background: 254, 253, 251;
|
||||
--color-toast-info-background: 253, 253, 254;
|
||||
--color-toast-loading-background: 253, 253, 254;
|
||||
|
||||
--color-toast-success-border: 218, 241, 219;
|
||||
--color-toast-error-border: 255, 219, 220;
|
||||
--color-toast-warning-border: 255, 247, 194;
|
||||
--color-toast-info-border: 210, 222, 255;
|
||||
--color-toast-loading-border: 224, 225, 230;
|
||||
}
|
||||
|
||||
[data-theme="light-contrast"] {
|
||||
--color-text-100: 11, 11, 11; /* primary text */
|
||||
--color-text-200: 38, 38, 38; /* secondary text */
|
||||
--color-text-300: 58, 58, 58; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="dark"],
|
||||
[data-theme="dark-contrast"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-primary-10: 8, 31, 43;
|
||||
--color-primary-20: 10, 37, 51;
|
||||
--color-primary-30: 13, 49, 69;
|
||||
--color-primary-40: 16, 58, 81;
|
||||
--color-primary-50: 18, 68, 94;
|
||||
--color-primary-60: 23, 86, 120;
|
||||
--color-primary-70: 28, 104, 146;
|
||||
--color-primary-80: 31, 116, 163;
|
||||
--color-primary-90: 34, 129, 180;
|
||||
--color-primary-100: 40, 146, 204;
|
||||
--color-primary-200: 41, 154, 214;
|
||||
--color-primary-300: 75, 170, 221;
|
||||
--color-primary-400: 109, 186, 227;
|
||||
--color-primary-500: 144, 202, 234;
|
||||
--color-primary-600: 169, 214, 239;
|
||||
--color-primary-700: 199, 229, 244;
|
||||
--color-primary-800: 216, 237, 248;
|
||||
--color-primary-900: 229, 243, 250;
|
||||
|
||||
--color-background-100: 25, 25, 25; /* primary bg */
|
||||
--color-background-90: 32, 32, 32; /* secondary bg */
|
||||
--color-background-80: 44, 44, 44; /* tertiary bg */
|
||||
|
||||
--color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
|
||||
--color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||
/* pi */
|
||||
--color-pi-50: var(--color-background-90);
|
||||
--color-pi-100: var(--color-background-90);
|
||||
--color-pi-200: var(--color-primary-200);
|
||||
--color-pi-300: var(--color-primary-200);
|
||||
--color-pi-400: var(--color-primary-200);
|
||||
--color-pi-500: var(--color-primary-200);
|
||||
--color-pi-600: 151, 150, 246;
|
||||
--color-pi-700: var(--color-primary-100);
|
||||
--color-pi-800: 57, 56, 149;
|
||||
--color-pi-900: 30, 29, 78;
|
||||
--color-pi-950: 14, 14, 37;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-text-100: 229, 229, 229; /* primary text */
|
||||
--color-text-200: 163, 163, 163; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-400: 82, 82, 82; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 82, 82, 82; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
|
||||
/* onboarding colors */
|
||||
--gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
|
||||
--gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
|
||||
--gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
|
||||
|
||||
--color-onboarding-text-100: 237, 238, 240;
|
||||
--color-onboarding-text-200: 176, 180, 187;
|
||||
--color-onboarding-text-300: 118, 123, 132;
|
||||
--color-onboarding-text-400: 105, 110, 119;
|
||||
|
||||
--color-onboarding-background-100: 54, 58, 64;
|
||||
--color-onboarding-background-200: 40, 42, 45;
|
||||
--color-onboarding-background-300: 40, 42, 45;
|
||||
--color-onboarding-background-400: 67, 72, 79;
|
||||
|
||||
--color-onboarding-border-100: 54, 58, 64;
|
||||
--color-onboarding-border-200: 54, 58, 64;
|
||||
--color-onboarding-border-300: 34, 35, 38, 0.5;
|
||||
|
||||
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
|
||||
|
||||
/* toast theme */
|
||||
--color-toast-success-text: 178, 221, 181;
|
||||
--color-toast-error-text: 206, 44, 49;
|
||||
--color-toast-warning-text: 255, 186, 24;
|
||||
--color-toast-info-text: 141, 164, 239;
|
||||
--color-toast-loading-text: 255, 255, 255;
|
||||
--color-toast-secondary-text: 185, 187, 198;
|
||||
--color-toast-tertiary-text: 139, 141, 152;
|
||||
|
||||
--color-toast-success-background: 46, 46, 46;
|
||||
--color-toast-error-background: 46, 46, 46;
|
||||
--color-toast-warning-background: 46, 46, 46;
|
||||
--color-toast-info-background: 46, 46, 46;
|
||||
--color-toast-loading-background: 46, 46, 46;
|
||||
|
||||
--color-toast-success-border: 42, 126, 59;
|
||||
--color-toast-error-border: 100, 23, 35;
|
||||
--color-toast-warning-border: 79, 52, 34;
|
||||
--color-toast-info-border: 58, 91, 199;
|
||||
--color-toast-loading-border: 96, 100, 108;
|
||||
}
|
||||
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-text-100: 250, 250, 250; /* primary text */
|
||||
--color-text-200: 241, 241, 241; /* secondary text */
|
||||
--color-text-300: 212, 212, 212; /* tertiary text */
|
||||
--color-text-400: 115, 115, 115; /* placeholder text */
|
||||
|
||||
--color-scrollbar: 115, 115, 115; /* scrollbar thumb */
|
||||
|
||||
--color-border-100: 245, 245, 245; /* subtle border= 1 */
|
||||
--color-border-200: 229, 229, 229; /* subtle border- 2 */
|
||||
--color-border-300: 212, 212, 212; /* strong border- 1 */
|
||||
--color-border-400: 185, 185, 185; /* strong border- 2 */
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
[data-theme="dark"],
|
||||
[data-theme="light-contrast"],
|
||||
[data-theme="dark-contrast"] {
|
||||
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
|
||||
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
|
||||
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
|
||||
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
font-variant-ligatures: none;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
/* scrollbar style */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tags-input-container {
|
||||
border: 2px solid #000;
|
||||
padding: 0.5em;
|
||||
border-radius: 3px;
|
||||
width: min(80vw, 600px);
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: rgb(218, 216, 216);
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.75em;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.tag-item .close {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: rgb(48, 48, 48);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0.5em;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
flex-grow: 1;
|
||||
padding: 0.5em 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* emoji icon picker */
|
||||
.conical-gradient {
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#ff6b00 0deg,
|
||||
#f7ae59 70.5deg,
|
||||
#3f76ff 151.12deg,
|
||||
#05c3ff 213deg,
|
||||
#18914f 289.87deg,
|
||||
#f6f172 329.25deg,
|
||||
#ff6b00 360deg
|
||||
);
|
||||
}
|
||||
|
||||
/* progress bar */
|
||||
.progress-bar {
|
||||
fill: currentColor;
|
||||
color: rgba(var(--color-sidebar-background-100));
|
||||
}
|
||||
|
||||
/* lineclamp */
|
||||
.lineclamp {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
/* popover2 styling */
|
||||
.bp4-popover2-transition-container {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder,
|
||||
::placeholder,
|
||||
:-ms-input-placeholder {
|
||||
color: rgb(var(--color-text-400));
|
||||
}
|
||||
|
||||
.bp4-overlay-content {
|
||||
z-index: 555 !important;
|
||||
}
|
||||
|
||||
.disable-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
-ms-writing-mode: vertical-lr;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
div.web-view-spinner {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: inline-block;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.web-view-spinner div {
|
||||
width: 6%;
|
||||
height: 16%;
|
||||
background: rgb(var(--color-text-400));
|
||||
position: absolute;
|
||||
left: 49%;
|
||||
top: 43%;
|
||||
opacity: 0;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
animation: fade 1s linear infinite;
|
||||
-webkit-animation: fade 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar1 {
|
||||
transform: rotate(0deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(0deg) translate(0, -130%);
|
||||
animation-delay: 0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar2 {
|
||||
transform: rotate(30deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(30deg) translate(0, -130%);
|
||||
animation-delay: -0.9167s;
|
||||
-webkit-animation-delay: -0.9167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar3 {
|
||||
transform: rotate(60deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(60deg) translate(0, -130%);
|
||||
animation-delay: -0.833s;
|
||||
-webkit-animation-delay: -0.833s;
|
||||
}
|
||||
div.web-view-spinner div.bar4 {
|
||||
transform: rotate(90deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(90deg) translate(0, -130%);
|
||||
animation-delay: -0.7497s;
|
||||
-webkit-animation-delay: -0.7497s;
|
||||
}
|
||||
div.web-view-spinner div.bar5 {
|
||||
transform: rotate(120deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(120deg) translate(0, -130%);
|
||||
animation-delay: -0.667s;
|
||||
-webkit-animation-delay: -0.667s;
|
||||
}
|
||||
div.web-view-spinner div.bar6 {
|
||||
transform: rotate(150deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(150deg) translate(0, -130%);
|
||||
animation-delay: -0.5837s;
|
||||
-webkit-animation-delay: -0.5837s;
|
||||
}
|
||||
div.web-view-spinner div.bar7 {
|
||||
transform: rotate(180deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(180deg) translate(0, -130%);
|
||||
animation-delay: -0.5s;
|
||||
-webkit-animation-delay: -0.5s;
|
||||
}
|
||||
div.web-view-spinner div.bar8 {
|
||||
transform: rotate(210deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(210deg) translate(0, -130%);
|
||||
animation-delay: -0.4167s;
|
||||
-webkit-animation-delay: -0.4167s;
|
||||
}
|
||||
div.web-view-spinner div.bar9 {
|
||||
transform: rotate(240deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(240deg) translate(0, -130%);
|
||||
animation-delay: -0.333s;
|
||||
-webkit-animation-delay: -0.333s;
|
||||
}
|
||||
div.web-view-spinner div.bar10 {
|
||||
transform: rotate(270deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(270deg) translate(0, -130%);
|
||||
animation-delay: -0.2497s;
|
||||
-webkit-animation-delay: -0.2497s;
|
||||
}
|
||||
div.web-view-spinner div.bar11 {
|
||||
transform: rotate(300deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(300deg) translate(0, -130%);
|
||||
animation-delay: -0.167s;
|
||||
-webkit-animation-delay: -0.167s;
|
||||
}
|
||||
div.web-view-spinner div.bar12 {
|
||||
transform: rotate(330deg) translate(0, -130%);
|
||||
-webkit-transform: rotate(330deg) translate(0, -130%);
|
||||
animation-delay: -0.0833s;
|
||||
-webkit-animation-delay: -0.0833s;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.vertical-scrollbar,
|
||||
.horizontal-scrollbar {
|
||||
scrollbar-width: initial;
|
||||
scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
|
||||
}
|
||||
.vertical-scrollbar:hover,
|
||||
.horizontal-scrollbar:hover {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
|
||||
}
|
||||
.vertical-scrollbar:active,
|
||||
.horizontal-scrollbar:active {
|
||||
scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar,
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-track,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(96, 100, 108, 0.1);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
|
||||
.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(96, 100, 108, 0.25);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(96, 100, 108, 0.5);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-thumb:active,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(96, 100, 108, 0.7);
|
||||
}
|
||||
.vertical-scrollbar::-webkit-scrollbar-corner,
|
||||
.horizontal-scrollbar::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
/* scrollbar sm size */
|
||||
.scrollbar-sm::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.scrollbar-sm::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar md size */
|
||||
.scrollbar-md::-webkit-scrollbar {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
.scrollbar-md::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
/* scrollbar lg size */
|
||||
|
||||
.scrollbar-lg::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.scrollbar-lg::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* highlight class */
|
||||
.highlight {
|
||||
border: 1px solid rgb(var(--color-primary-100)) !important;
|
||||
}
|
||||
.highlight-with-line {
|
||||
border-left: 5px solid rgb(var(--color-primary-100)) !important;
|
||||
background: rgb(var(--color-background-80));
|
||||
}
|
||||
|
||||
/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers */
|
||||
|
||||
.disable-autofill-style:-webkit-autofill,
|
||||
.disable-autofill-style:-webkit-autofill:hover,
|
||||
.disable-autofill-style:-webkit-autofill:focus,
|
||||
.disable-autofill-style:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
Generated
+310
-244
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user