vynte-infra/plane
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: init tailwind v4

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-12-02 17:56:10 +05:30
parent 8db95d9ec0
commit 5d5e722ca7
15 changed files with 1834 additions and 2098 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/package.json
+1
View File
@@ -81,6 +81,7 @@
"@plane/typescript-config": "workspace:*",
"@prettier/plugin-oxc": "0.0.4",
"@react-router/dev": "catalog:",
"@tailwindcss/typography": "0.5.19",
"@types/lodash-es": "catalog:",
"@types/node": "catalog:",
"@types/react": "catalog:",
apps/web/postcss.config.cjs
-3
View File
@@ -1,3 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-require-imports
module.exports = require("@plane/tailwind-config/postcss.config.js");
apps/web/postcss.config.js
+3
View File
@@ -0,0 +1,3 @@
import postcss from "@plane/tailwind-config/postcss.config.js";
export default postcss;
apps/web/styles/globals.css
+99 -491
View File
@@ -1,507 +1,115 @@
@import "@plane/tailwind-config/index.css";
@import "@plane/propel/styles/fonts";
@import "@plane/editor/styles";
@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "@tailwindcss/typography";
@layer components {
.text-1\.5xl {
font-size: 1.375rem;
line-height: 1.875rem;
}
.text-2\.5xl {
font-size: 1.75rem;
line-height: 2.25rem;
}
html {
font-family: "Inter", sans-serif;
}
@layer utilities {
@keyframes slide-up {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
:root {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
.animate-slide-up {
animation: slide-up 0.3s ease-out forwards;
}
--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;
}
@layer base {
html {
font-family: "Inter", sans-serif;
}
[data-theme="light"],
[data-theme="light-contrast"] {
/* 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="dark"],
[data-theme="dark-contrast"] {
/* 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;
}
/* 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 */
: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;
}
--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;
apps/web/tailwind.config.cjs
-8
View File
@@ -1,8 +0,0 @@
/* eslint-disable @typescript-eslint/no-var-requires */
// eslint-disable-next-line @typescript-eslint/no-require-imports
const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
module.exports = {
presets: [sharedConfig],
};
packages/tailwind-config/animations.css
+14
View File
@@ -0,0 +1,14 @@
@theme {
--animate-slide-up: slide-up 0.3s ease-out forwards;
@keyframes slide-up {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
}
packages/tailwind-config/colors.css
+479
View File
@@ -0,0 +1,479 @@
@theme {
--color-*: initial;
/* White with opacity */
--color-alpha-white-0: oklch(1 0 0 / 0%);
--color-alpha-white-100: oklch(1 0 0 / 5%);
--color-alpha-white-200: oklch(1 0 0 / 10%);
--color-alpha-white-300: oklch(1 0 0 / 15%);
--color-alpha-white-400: oklch(1 0 0 / 20%);
--color-alpha-white-500: oklch(1 0 0 / 30%);
--color-alpha-white-600: oklch(1 0 0 / 40%);
--color-alpha-white-700: oklch(1 0 0 / 50%);
--color-alpha-white-800: oklch(1 0 0 / 60%);
--color-alpha-white-900: oklch(1 0 0 / 70%);
--color-alpha-white-1000: oklch(1 0 0 / 80%);
--color-alpha-white-1100: oklch(1 0 0 / 90%);
--color-alpha-white-1200: oklch(1 0 0 / 95%);
/* Black with opacity */
--color-alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
--color-alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
--color-alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
--color-alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
--color-alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
--color-alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
--color-alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
--color-alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
--color-alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
--color-alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
--color-alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
--color-alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
--color-alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
}
/* ---------- Light mode color tokens ---------- */
@theme {
/* Neutral colors */
--color-neutral-white: oklch(1 0 0);
--color-neutral-100: oklch(0.9851 0 129.63);
--color-neutral-200: oklch(0.9694 0.0011 197.14);
--color-neutral-300: oklch(0.9544 0.0011 197.14);
--color-neutral-400: oklch(0.9393 0.0011 197.14);
--color-neutral-500: oklch(0.9237 0.0026 228.79);
--color-neutral-600: oklch(0.8932 0.0026 228.79);
--color-neutral-700: oklch(0.8617 0.0036 219.54);
--color-neutral-800: oklch(0.6994 0.0072 233.69);
--color-neutral-900: oklch(0.616 0.0084 228.93);
--color-neutral-1000: oklch(0.5279 0.0078 233.75);
--color-neutral-1100: oklch(0.4384 0.0072 223.57);
--color-neutral-1200: oklch(0.2376 0.0036 228.95);
--color-neutral-black: oklch(0.1472 0.0034 196.79);
/* Brand colors */
--color-brand-100: oklch(0.9847 0.0083 236.56);
--color-brand-200: oklch(0.9715 0.0167 230.9);
--color-brand-300: oklch(0.9428 0.0341 230.22);
--color-brand-400: oklch(0.9008 0.0587 232);
--color-brand-500: oklch(0.8414 0.0947 233.08);
--color-brand-600: oklch(0.7649 0.1392 236.3);
--color-brand-700: oklch(0.6766 0.1665 243.91);
--color-brand-900: oklch(0.4347 0.104093 242.4823);
--color-brand-1000: oklch(0.3399 0.0783 240.32);
--color-brand-1100: oklch(0.2626 0.0578 237.5);
--color-brand-1200: oklch(0.2093 0.0438 234.02);
--color-brand-default: oklch(0.4799 0.1158 242.91);
/* Green/Success colors */
--color-green-100: oklch(0.9819 0.0181 155.83);
--color-green-200: oklch(0.9624 0.0434 156.74);
--color-green-300: oklch(0.9258 0.0845 155.86);
--color-green-400: oklch(0.8704 0.149 154.62);
--color-green-500: oklch(0.7914 0.2091 151.66);
--color-green-600: oklch(0.7289 0.2119 147.82);
--color-green-700: oklch(0.632 0.185972 147.3695);
--color-green-800: oklch(0.5296 0.149485 148.9899);
--color-green-900: oklch(0.4468 0.1187 151.4);
--color-green-1000: oklch(0.3935 0.0957 152.28);
--color-green-1100: oklch(0.2654 0.0651 152.77);
/* Amber/Warning colors */
--color-amber-100: oklch(0.9869 0.0214 95.28);
--color-amber-200: oklch(0.9617 0.0592 95.89);
--color-amber-300: oklch(0.9244 0.1203 95.85);
--color-amber-400: oklch(0.8781 0.1688 91.86);
--color-amber-500: oklch(0.829 0.1712 81.04);
--color-amber-600: oklch(0.7724 0.172798 65.367);
--color-amber-700: oklch(0.6671 0.1685 53.38);
--color-amber-800: oklch(0.557 0.158291 45.3594);
--color-amber-900: oklch(0.4747 0.135757 44.9806);
--color-amber-1000: oklch(0.4149 0.1126 45.88);
--color-amber-1100: oklch(0.279 0.0773 45.6);
/* Red/Danger colors */
--color-red-100: oklch(0.9705 0.0129 17.38);
--color-red-200: oklch(0.9365 0.032 17.74);
--color-red-300: oklch(0.8834 0.0616 18.39);
--color-red-400: oklch(0.8053 0.1109 19.78);
--color-red-500: oklch(0.7022 0.1892 22.23);
--color-red-600: oklch(0.6378 0.2373 25.44);
--color-red-700: oklch(0.583 0.238666 28.4765);
--color-red-800: oklch(0.5095 0.208583 28.513);
--color-red-900: oklch(0.4446 0.1774 26.79);
--color-red-1000: oklch(0.3967 0.1408 25.71);
--color-red-1100: oklch(0.3493 0.1215 25.21);
}
/* -------------------- Light mode custom(derived) colors -------------------- */
@theme inline {
/* Background colors */
--background-color-canvas: var(--color-neutral-300);
--background-color-surface-1: var(--color-neutral-white);
--background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-alpha-black-100);
--background-color-layer-1-active: var(--color-alpha-black-200);
--background-color-layer-1-selected: var(--color-alpha-black-300);
--background-color-layer-2: var(--color-neutral-white);
--background-color-layer-2-hover: var(--color-alpha-black-100);
--background-color-layer-2-active: var(--color-alpha-black-200);
--background-color-layer-2-selected: var(--color-alpha-black-300);
--background-color-layer-3: var(--color-neutral-200);
--background-color-layer-3-hover: var(--color-alpha-black-100);
--background-color-layer-3-active: var(--color-alpha-black-200);
--background-color-layer-3-selected: var(--color-alpha-black-300);
--background-color-layer-transparent: var(--color-alpha-white-0);
--background-color-layer-transparent-hover: var(--color-alpha-black-100);
--background-color-layer-transparent-active: var(--color-alpha-black-200);
--background-color-layer-transparent-selected: var(--color-alpha-black-300);
--background-color-layer-disabled: var(--color-neutral-400);
--background-color-accent-primary: var(--color-brand-default);
--background-color-accent-primary-hover: var(--color-brand-900);
--background-color-accent-primary-active: var(--color-brand-1000);
--background-color-accent-subtle: var(--color-brand-100);
--background-color-accent-subtle-hover: var(--color-brand-200);
--background-color-accent-subtle-active: var(--color-brand-300);
--background-color-success-primary: var(--color-green-700);
--background-color-success-subtle: var(--color-green-100);
--background-color-success-subtle-1: var(--color-green-200);
--background-color-warning-primary: var(--color-amber-600);
--background-color-warning-subtle: var(--color-amber-100);
--background-color-danger-primary: var(--color-red-700);
--background-color-danger-primary-hover: var(--color-red-800);
--background-color-danger-primary-active: var(--color-red-900);
--background-color-danger-primary-selected: var(--color-red-900);
--background-color-danger-subtle: var(--color-red-100);
--background-color-danger-subtle-hover: var(--color-red-200);
--background-color-danger-subtle-active: var(--color-red-300);
--background-color-danger-subtle-selected: var(--color-red-300);
--background-color-danger-transparent: var(--color-red-100);
--background-color-danger-transparent-hover: var(--color-red-100);
--background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100);
/* Border colors */
--border-color-subtle: var(--color-neutral-400);
--border-color-subtle-1: var(--color-neutral-500);
--border-color-strong: var(--color-neutral-600);
--border-color-strong-1: var(--color-neutral-700);
--border-color-inverse: var(--color-neutral-white);
--border-color-disabled: var(--color-neutral-300);
--border-color-accent-strong: var(--color-brand-default);
--border-color-accent-subtle: var(--color-brand-300);
--border-color-success-strong: var(--color-green-700);
--border-color-success-subtle: var(--color-green-300);
--border-color-warning-strong: var(--color-amber-700);
--border-color-warning-subtle: var(--color-amber-400);
--border-color-danger-strong: var(--color-red-700);
--border-color-danger-subtle: var(--color-red-400);
/* Text colors */
--text-color-primary: var(--color-neutral-1200);
--text-color-secondary: var(--color-neutral-1100);
--text-color-tertiary: var(--color-neutral-1000);
--text-color-placeholder: var(--color-neutral-900);
--text-color-disabled: var(--color-neutral-800);
--text-color-accent-primary: var(--color-brand-default);
--text-color-on-color: var(--color-neutral-100);
--text-color-accent-secondary: var(--color-brand-700);
--text-color-on-color-disabled: hsla(201, 7%, 18%, 0.25);
--text-color-inverse: var(--color-neutral-white);
--text-color-success: var(--color-green-700);
--text-color-success-primary: var(--color-green-900);
--text-color-success-secondary: var(--color-green-700);
--text-color-warning: var(--color-amber-700);
--text-color-warning-primary: var(--color-amber-900);
--text-color-warning-secondary: var(--color-amber-700);
--text-color-danger: var(--color-red-700);
--text-color-danger-primary: var(--color-red-900);
--text-color-danger-secondary: var(--color-red-700);
/* Icon colors */
--text-color-icon-primary: var(--color-neutral-1200);
--text-color-icon-accent-subtle: var(--color-brand-500);
--text-color-icon-accent-primary: var(--color-brand-default);
--text-color-icon-danger-primary: var(--color-red-900);
--text-color-icon-danger-secondary: var(--color-red-700);
--text-color-icon-success-primary: var(--color-green-900);
--text-color-icon-success-secondary: var(--color-green-700);
--text-color-icon-warning-primary: var(--color-amber-900);
--text-color-icon-warning-secondary: var(--color-amber-700);
--text-color-icon-accent-primary-inverse: var(--color-brand-900);
--text-color-icon-accent-secondary: var(--color-brand-1200);
--text-color-icon-secondary: var(--color-neutral-1100);
--text-color-icon-tertiary: var(--color-neutral-900);
--text-color-icon-placeholder: var(--color-neutral-800);
--text-color-icon-disabled: var(--color-neutral-700);
--text-color-icon-danger: var(--color-red-700);
--text-color-icon-on-color: var(--color-neutral-white);
--text-color-icon-on-color-disabled: hsla(201, 7%, 18%, 0.25);
--text-color-icon-inverse: var(--color-neutral-white);
/* Link colors */
--text-color-link-primary: var(--color-brand-default);
--text-color-link-primary-hover: var(--color-brand-900);
--text-color-link-secondary: var(--color-neutral-900);
/* Label colors */
--label-indigo-bg: var(--extended-palette-indigo-100);
--label-indigo-bg-strong: var(--extended-palette-indigo-700);
--label-indigo-hover: var(--extended-palette-indigo-300);
--label-indigo-icon: var(--extended-palette-indigo-700);
--label-indigo-text: var(--extended-palette-indigo-700);
--label-indigo-border: hsla(0, 0%, 100%, 0);
--label-indigo-focus: var(--extended-palette-indigo-500);
--label-emerald-bg: var(--extended-palette-emerald-50);
--label-emerald-bg-strong: var(--extended-palette-emerald-600);
--label-emerald-hover: var(--extended-palette-emerald-200);
--label-emerald-icon: var(--extended-palette-emerald-600);
--label-emerald-text: var(--extended-palette-emerald-800);
--label-emerald-border: hsla(0, 0%, 100%, 0);
--label-emerald-focus: var(--extended-palette-emerald-700);
--label-grey-bg: var(--extended-palette-grey-50);
--label-grey-bg-strong: var(--extended-palette-grey-700);
--label-grey-hover: var(--extended-palette-grey-100);
--label-grey-icon: var(--extended-palette-grey-700);
--label-grey-text: var(--extended-palette-grey-700);
--label-grey-border: hsla(0, 0%, 100%, 0);
--label-grey-focus: var(--extended-palette-grey-500);
--label-crimson-bg: var(--extended-palette-crimson-50);
--label-crimson-bg-strong: var(--extended-palette-crimson-700);
--label-crimson-hover: var(--extended-palette-crimson-100);
--label-crimson-icon: var(--extended-palette-crimson-700);
--label-crimson-text: var(--extended-palette-crimson-700);
--label-crimson-border: hsla(0, 0%, 100%, 0);
--label-crimson-focus: var(--extended-palette-crimson-500);
/* Illustration colors */
--illustration-fill-white: var(--color-neutral-white);
--illustration-fill-1: var(--color-neutral-200);
--illustration-fill-2: var(--color-neutral-400);
--illustration-fill-3: var(--color-neutral-700);
--illustration-stroke-1: var(--color-neutral-700);
--illustration-stroke-2: var(--color-neutral-800);
--illustration-stroke-3: var(--color-neutral-1200);
}
html[data-theme*="dark"] {
/* ---------- Dark mode color tokens ---------- */
@theme {
/* Neutral colors */
--color-neutral-black: oklch(0.1689 0.0021 286.18);
--color-neutral-100: oklch(0.2039 0.0025 247.95);
--color-neutral-200: oklch(0.216 0.0037 228.98);
--color-neutral-300: oklch(0.2376 0.0036 228.95);
--color-neutral-400: oklch(0.2586 0.0035 228.93);
--color-neutral-500: oklch(0.302 0.0067 229.06);
--color-neutral-600: oklch(0.3421 0.0045 219.61);
--color-neutral-700: oklch(0.3996 0.0052 236.62);
--color-neutral-800: oklch(0.6994 0.0072 233.69);
--color-neutral-900: oklch(0.7485 0.0063 239.85);
--color-neutral-1000: oklch(0.7966 0.0044 236.51);
--color-neutral-1100: oklch(0.8463 0.0036 219.54);
--color-neutral-1200: oklch(0.9237 0.0026 228.79);
--color-neutral-white: oklch(0.9702 0 0);
/* Brand colors */
--color-brand-100: oklch(0.2029 0.03 232.24);
--color-brand-200: oklch(0.2513 0.0418 234.6);
--color-brand-300: oklch(0.3208 0.05806 236.44);
--color-brand-400: oklch(0.4088 0.077702 237.13);
--color-brand-500: oklch(0.4511 0.087024 237.37);
--color-brand-700: oklch(0.7408 0.100309 233.89);
--color-brand-800: oklch(0.8318 0.065614 232.07);
--color-brand-900: oklch(0.8969 0.040089 231.35);
--color-brand-1000: oklch(0.9409 0.022883 231.01);
--color-brand-1100: oklch(0.9704 0.011421 230.82);
--color-brand-1200: oklch(0.9856 0.005 228.82);
--color-brand-default: oklch(0.6311 0.126281 238.01);
/* Green colors */
--color-green-100: oklch(0.2721 0.067322 152.52);
--color-green-200: oklch(0.3935 0.0957 152.28);
--color-green-300: oklch(0.4468 0.1187 151.4);
--color-green-400: oklch(0.5296 0.149485 148.9899);
--color-green-500: oklch(0.632 0.185972 147.3695);
--color-green-600: oklch(0.7289 0.2119 147.82);
--color-green-700: oklch(0.7914 0.2091 151.66);
--color-green-800: oklch(0.8704 0.149 154.62);
--color-green-900: oklch(0.9258 0.0845 155.86);
--color-green-1000: oklch(0.9624 0.0434 156.74);
--color-green-1100: oklch(0.9819 0.0181 155.83);
/* Amber colors */
--color-amber-100: oklch(0.3042 0.0853 45.16);
--color-amber-200: oklch(0.4149 0.1126 45.88);
--color-amber-300: oklch(0.4747 0.135757 44.9806);
--color-amber-400: oklch(0.557 0.158291 45.3594);
--color-amber-500: oklch(0.6671 0.1685 53.38);
--color-amber-600: oklch(0.7724 0.172798 65.367);
--color-amber-700: oklch(0.829 0.1712 81.04);
--color-amber-800: oklch(0.8781 0.1688 91.86);
--color-amber-900: oklch(0.9244 0.1203 95.85);
--color-amber-1000: oklch(0.9617 0.0592 95.89);
--color-amber-1100: oklch(0.9869 0.0214 95.28);
/* Red colors */
--color-red-100: oklch(0.2615 0.085 24.41);
--color-red-200: oklch(0.3967 0.1408 25.71);
--color-red-300: oklch(0.4446 0.1774 26.79);
--color-red-400: oklch(0.5095 0.208583 28.513);
--color-red-500: oklch(0.583 0.238666 28.4765);
--color-red-600: oklch(0.6378 0.2373 25.44);
--color-red-700: oklch(0.7022 0.1892 22.23);
--color-red-800: oklch(0.8053 0.1109 19.78);
--color-red-900: oklch(0.8834 0.0616 18.39);
--color-red-1000: oklch(0.9365 0.032 17.74);
--color-red-1100: oklch(0.9705 0.0129 17.38);
}
/* -------------------- Dark mode custom(derived) colors -------------------- */
@theme inline {
/* Background colors */
--background-color-canvas: var(--color-neutral-black);
--background-color-surface-1: var(--color-neutral-100);
--background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-alpha-white-100);
--background-color-layer-1-active: var(--color-alpha-white-200);
--background-color-layer-1-selected: var(--color-alpha-white-300);
--background-color-layer-2: var(--color-neutral-300);
--background-color-layer-2-hover: var(--color-alpha-white-100);
--background-color-layer-2-active: var(--color-alpha-white-200);
--background-color-layer-2-selected: var(--color-alpha-white-300);
--background-color-layer-3: var(--color-neutral-400);
--background-color-layer-3-hover: var(--color-alpha-white-100);
--background-color-layer-3-active: var(--color-alpha-white-200);
--background-color-layer-3-selected: var(--color-alpha-white-300);
--background-color-layer-transparent: var(--alpha-black-0);
--background-color-layer-transparent-hover: var(--color-alpha-white-100);
--background-color-layer-transparent-active: var(--color-alpha-white-200);
--background-color-layer-transparent-selected: var(--color-alpha-white-300);
--background-color-layer-disabled: var(--color-neutral-700);
--background-color-accent-primary: var(--color-brand-default);
--background-color-accent-primary-hover: var(--color-brand-500);
--background-color-accent-primary-active: var(--color-brand-400);
--background-color-accent-subtle: var(--color-brand-100);
--background-color-accent-subtle-hover: var(--color-brand-200);
--background-color-accent-subtle-active: var(--color-brand-300);
--background-color-success-primary: var(--color-green-700);
--background-color-success-subtle: var(--color-green-100);
--background-color-success-subtle-1: var(--color-green-100);
--background-color-warning-primary: hsla(201, 100%, 48%, 1);
--background-color-warning-subtle: var(--color-amber-100);
--background-color-danger-primary: var(--color-red-300);
--background-color-danger-primary-hover: var(--color-red-400);
--background-color-danger-primary-active: var(--color-red-500);
--background-color-danger-primary-selected: var(--color-red-500);
--background-color-danger-subtle: var(--color-red-100);
--background-color-danger-subtle-hover: var(--color-red-200);
--background-color-danger-subtle-active: var(--color-red-300);
--background-color-danger-subtle-selected: var(--color-red-300);
--background-color-danger-transparent: var(--color-red-100);
--background-color-danger-transparent-hover: var(--color-red-100);
--background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100);
/* Border colors */
--border-color-subtle: var(--color-neutral-400);
--border-color-subtle-1: var(--color-neutral-500);
--border-color-strong: var(--color-neutral-600);
--border-color-strong-1: var(--color-neutral-700);
--border-color-inverse: var(--color-neutral-100);
--border-color-disabled: var(--color-neutral-300);
--border-color-accent-strong: var(--color-brand-default);
--border-color-accent-subtle: var(--color-brand-300);
--border-color-success-strong: var(--color-green-400);
--border-color-success-subtle: var(--color-green-200);
--border-color-warning-strong: var(--color-amber-400);
--border-color-warning-subtle: var(--color-amber-200);
--border-color-danger-strong: var(--color-red-400);
--border-color-danger-subtle: var(--color-red-200);
/* Text colors */
--text-color-primary: var(--color-neutral-1200);
--text-color-secondary: var(--color-neutral-1100);
--text-color-tertiary: var(--color-neutral-1000);
--text-color-placeholder: var(--color-neutral-900);
--text-color-disabled: var(--color-neutral-800);
--text-color-accent-primary: var(--color-brand-default);
--text-color-on-color: var(--color-neutral-1200);
--text-color-accent-secondary: var(--color-brand-700);
--text-color-on-color-disabled: hsla(201, 7%, 92%, 0.25);
--text-color-inverse: var(--color-neutral-black);
--text-color-success: var(--color-green-700);
--text-color-success-primary: var(--color-green-900);
--text-color-success-secondary: var(--color-green-700);
--text-color-warning: var(--color-amber-700);
--text-color-warning-primary: var(--color-amber-900);
--text-color-warning-secondary: var(--color-amber-700);
--text-color-danger: var(--color-red-700);
--text-color-danger-primary: var(--color-red-900);
--text-color-danger-secondary: var(--color-red-700);
/* Icon colors */
--text-color-icon-primary: var(--color-neutral-1200);
--text-color-icon-accent-subtle: var(--brand-light-500);
--text-color-icon-accent-primary: var(--color-brand-default);
--text-color-icon-danger-primary: var(--color-red-900);
--text-color-icon-danger-secondary: var(--color-red-700);
--text-color-icon-success-primary: var(--color-green-900);
--text-color-icon-success-secondary: var(--color-green-700);
--text-color-icon-warning-primary: var(--color-amber-900);
--text-color-icon-warning-secondary: var(--color-amber-700);
--text-color-icon-accent-primary-inverse: var(--color-brand-900);
--text-color-icon-accent-secondary: var(--color-brand-1200);
--text-color-icon-secondary: var(--color-neutral-1100);
--text-color-icon-tertiary: var(--color-neutral-1000);
--text-color-icon-placeholder: var(--color-neutral-800);
--text-color-icon-disabled: var(--color-neutral-700);
--text-color-icon-danger: var(--color-red-700);
--text-color-icon-on-color: var(--color-neutral-white);
--text-color-icon-on-color-disabled: hsla(201, 7%, 92%, 0.25);
--text-color-icon-inverse: var(--color-neutral-black);
/* Link colors */
--text-color-link-primary: var(--color-brand-default);
--text-color-link-primary-hover: var(--brand-light-600);
--text-color-link-secondary: var(--color-neutral-1100);
/* Label colors */
--label-indigo-bg: var(--extended-palette-indigo-800);
--label-indigo-bg-strong: var(--extended-palette-indigo-500);
--label-indigo-hover: var(--extended-palette-indigo-700);
--label-indigo-icon: var(--extended-palette-indigo-500);
--label-indigo-text: var(--extended-palette-indigo-500);
--label-indigo-border: hsla(0, 0%, 100%, 0);
--label-indigo-focus: var(--extended-palette-indigo-400);
--label-emerald-bg: var(--extended-palette-emerald-700);
--label-emerald-bg-strong: var(--extended-palette-emerald-600);
--label-emerald-hover: var(--extended-palette-emerald-800);
--label-emerald-icon: var(--extended-palette-emerald-600);
--label-emerald-text: var(--extended-palette-emerald-400);
--label-emerald-border: hsla(0, 0%, 100%, 0);
--label-emerald-focus: var(--extended-palette-emerald-700);
--label-grey-bg: var(--extended-palette-grey-800);
--label-grey-bg-strong: var(--extended-palette-grey-500);
--label-grey-hover: var(--extended-palette-grey-700);
--label-grey-icon: var(--extended-palette-grey-500);
--label-grey-text: var(--extended-palette-grey-500);
--label-grey-border: hsla(0, 0%, 100%, 0);
--label-grey-focus: var(--extended-palette-grey-400);
--label-crimson-bg: var(--extended-palette-crimson-800);
--label-crimson-bg-strong: var(--extended-palette-crimson-500);
--label-crimson-hover: var(--extended-palette-crimson-700);
--label-crimson-icon: var(--extended-palette-crimson-500);
--label-crimson-text: var(--extended-palette-crimson-500);
--label-crimson-border: hsla(0, 0%, 100%, 0);
--label-crimson-focus: var(--extended-palette-crimson-400);
/* Illustration colors */
--illustration-fill-white: var(--color-neutral-400);
--illustration-fill-1: var(--color-neutral-500);
--illustration-fill-2: var(--color-neutral-700);
--illustration-fill-3: var(--color-neutral-700);
--illustration-stroke-1: var(--color-neutral-700);
--illustration-stroke-2: var(--color-neutral-800);
--illustration-stroke-3: var(--color-neutral-1000);
}
}
packages/tailwind-config/global.css
-833
View File
@@ -1,833 +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;
}
@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;
}
}
packages/tailwind-config/index.css
+401
View File
@@ -0,0 +1,401 @@
@import "tailwindcss";
@import "./colors.css";
@import "./spacing.css";
@import "./typography.css";
@import "./animations.css";
html {
font-family: "Inter", sans-serif;
}
* {
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;
}
}
packages/tailwind-config/package.json
+10 -6
View File
@@ -5,12 +5,16 @@
"description": "common tailwind configuration across monorepo",
"main": "tailwind.config.js",
"private": true,
"sideEffects": [
"**/*.css"
],
"devDependencies": {
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.6"
"@tailwindcss/postcss": "4.1.13",
"postcss": "8.5.6",
"tailwindcss": "4.1.17"
},
"exports": {
"./index.css": "./index.css",
"./postcss.config.js": "./postcss.config.js"
}
}
packages/tailwind-config/postcss.config.js
+3 -4
View File
@@ -1,7 +1,6 @@
module.exports = {
export default {
plugins: {
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
// "tailwindcss/nesting": {},
"@tailwindcss/postcss": {},
},
};
packages/tailwind-config/spacing.css
+39
View File
@@ -0,0 +1,39 @@
/* Spacing - Mode 1 */
@theme {
--spacing-*: initial;
--spacing-0: 0;
--spacing-25: 0.0625rem;
--spacing-50: 0.125rem;
--spacing-100: 0.25rem;
--spacing-150: 0.375rem;
--spacing-200: 0.5rem;
--spacing-300: 0.75rem;
--spacing-400: 1rem;
--spacing-500: 1.25rem;
--spacing-600: 1.5rem;
--spacing-700: 1.75rem;
--spacing-800: 2rem;
--spacing-900: 2.25rem;
--spacing-1000: 2.5rem;
--spacing-1100: 2.75rem;
--spacing-1200: 3rem;
/* Borders radius */
--radius-*: initial;
--radius-none: 0;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-xxl: 1rem;
--radius-rounded: 9999px;
/* Border width */
--border-width-*: initial;
--border-width-sm: 1px;
--border-width-md: 1.5px;
--border-width-lg: 2px;
--border-width-xl: 2.5px;
--default-border-width: 1px;
}
packages/tailwind-config/tailwind.config.js
-492
View File
@@ -1,492 +0,0 @@
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
const convertToRGBA = (variableName, alpha) =>
`rgba(var(${variableName}), ${alpha})`;
/** @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}",
],
},
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) */,
},
},
},
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"]);
},
],
};
packages/tailwind-config/typography.css
+400
View File
@@ -0,0 +1,400 @@
@theme {
/* Font family */
--font-family-*: initial;
--font-family-heading: Inter;
--font-family-body: Inter;
--font-family-code: IBM Mono;
/* Font weight */
--font-weight-*: initial;
--font-weight-light: Light;
--font-weight-regular: 400;
--font-weight-medium: medium;
--font-weight-semi-bold: semi bold;
--font-weight-bold: bold;
--font-weight-heavy: heavy;
/* Font size */
--text-*: initial;
--text-9: 0.5625rem;
--text-10: 0.625rem;
--text-11: 0.6875rem;
--text-12: 0.75rem;
--text-13: 0.8125rem;
--text-14: 0.875rem;
--text-16: 1rem;
--text-18: 1.125rem;
--text-20: 1.25rem;
--text-24: 1.5rem;
--text-28: 1.75rem;
--text-32: 2rem;
--text-40: 2.5rem;
/* Letter spacing */
--tracking-*: initial;
--tracking-extra-tight: -0.025rem;
--tracking-tight: -0.05rem;
--tracking-default: 0;
--tracking-wide: 0.05rem;
}
/* Text Styles */
.font-h1-regular {
font-family: Inter;
font-size: 32px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 400;
}
.font-h1-medium {
font-family: Inter;
font-size: 32px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 500;
}
.font-h1-semibold {
font-family: Inter;
font-size: 32px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 600;
}
.font-h1-bold {
font-family: Inter;
font-size: 32px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 700;
}
.font-h2-regular {
font-family: Inter;
font-size: 28px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 400;
}
.font-h2-medium {
font-family: Inter;
font-size: 28px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 500;
}
.font-h2-semibold {
font-family: Inter;
font-size: 28px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 600;
}
.font-h2-bold {
font-family: Inter;
font-size: 28px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 700;
}
.font-h3-regular {
font-family: Inter;
font-size: 24px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 400;
}
.font-h3-medium {
font-family: Inter;
font-size: 24px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 500;
}
.font-h3-semibold {
font-family: Inter;
font-size: 24px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 600;
}
.font-h3-bold {
font-family: Inter;
font-size: 24px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 700;
}
.font-h4-regular {
font-family: Inter;
font-size: 20px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 400;
}
.font-h4-medium {
font-family: Inter;
font-size: 20px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 500;
}
.font-h4-semibold {
font-family: Inter;
font-size: 20px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 600;
}
.font-h4-bold {
font-family: Inter;
font-size: 20px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 700;
}
.font-h5-regular {
font-family: Inter;
font-size: 16px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 400;
}
.font-h5-medium {
font-family: Inter;
font-size: 16px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 500;
}
.font-h5-semibold {
font-family: Inter;
font-size: 16px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 600;
}
.font-h5-bold {
font-family: Inter;
font-size: 16px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 700;
}
.font-h6-regular {
font-family: Inter;
font-size: 14px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 400;
}
.font-h6-medium {
font-family: Inter;
font-size: 14px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 500;
}
.font-h6-semibold {
font-family: Inter;
font-size: 14px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 600;
}
.font-h6-bold {
font-family: Inter;
font-size: 14px;
line-height: 120%;
letter-spacing: 0%;
font-weight: 700;
}
.font-body-md-light {
font-family: Inter;
font-size: 16px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 300;
}
.font-body-md-regular {
font-family: Inter;
font-size: 16px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 400;
}
.font-body-md-medium {
font-family: Inter;
font-size: 16px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 500;
}
.font-body-md-semibold {
font-family: Inter;
font-size: 16px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 600;
}
.font-body-sm-light {
font-family: Inter;
font-size: 14px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 300;
}
.font-body-sm-regular {
font-family: Inter;
font-size: 14px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 400;
}
.font-body-sm-medium {
font-family: Inter;
font-size: 14px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 500;
}
.font-body-sm-semibold {
font-family: Inter;
font-size: 14px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 600;
}
.font-body-xs-light {
font-family: Inter;
font-size: 13px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 300;
}
.font-body-xs-regular {
font-family: Inter;
font-size: 13px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 400;
}
.font-body-xs-medium {
font-family: Inter;
font-size: 13px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 500;
}
.font-body-xs-semibold {
font-family: Inter;
font-size: 13px;
line-height: 140%;
letter-spacing: 1%;
font-weight: 600;
}
.font-caption-md-regular {
font-family: Inter;
font-size: 12px;
line-height: 110%;
letter-spacing: 0%;
font-weight: 400;
}
.font-caption-md-medium {
font-family: Inter;
font-size: 12px;
line-height: 110%;
letter-spacing: 0%;
font-weight: 500;
}
.font-caption-md-semibold {
font-family: Inter;
font-size: 12px;
line-height: 110%;
letter-spacing: 0%;
font-weight: 600;
}
.font-caption-sm-regular {
font-family: Inter;
font-size: 11px;
line-height: 110%;
letter-spacing: 0%;
font-weight: 400;
}
.font-caption-sm-medium {
font-family: Inter;
font-size: 11px;
line-height: 110%;
letter-spacing: 0%;
font-weight: 500;
}
.font-caption-sm-semibold {
font-family: Inter;
font-size: 11px;
line-height: 110%;
letter-spacing: 0%;
font-weight: 600;
}
.font-caption-xs-regular {
font-family: Inter;
font-size: 10px;
line-height: 100%;
letter-spacing: 1%;
font-weight: 400;
}
.font-caption-xs-medium {
font-family: Inter;
font-size: 10px;
line-height: 100%;
letter-spacing: 1%;
font-weight: 500;
}
.font-caption-xs-semibold {
font-family: Inter;
font-size: 10px;
line-height: 100%;
letter-spacing: 1%;
font-weight: 600;
}
pnpm-lock.yaml
Generated
+385 -261
View File
File diff suppressed because it is too large Load Diff