@activecollab/components 2.0.402 → 2.0.404
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/GlobalStyle.js +1 -1
- package/dist/cjs/components/GlobalStyle.js.map +1 -1
- package/dist/cjs/components/Window/Window.js +1 -0
- package/dist/cjs/components/Window/Window.js.map +1 -1
- package/dist/esm/components/GlobalStyle.js +1 -1
- package/dist/esm/components/GlobalStyle.js.map +1 -1
- package/dist/esm/components/Window/Window.d.ts.map +1 -1
- package/dist/esm/components/Window/Window.js +1 -0
- package/dist/esm/components/Window/Window.js.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.GlobalStyle = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
8
|
var _themes = require("../utils/themes");
|
|
9
|
-
var GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--selectable:#d7d7da;--selectable-active:#3b82f6;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#23252d;--color-theme-400:#17171a;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#292a39;--color-theme-300:#1f212b;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#272c35;--color-theme-300:#1e2127;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], _themes.DARK_THEME_MATCH);
|
|
9
|
+
var GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--selectable:#d7d7da;--selectable-active:#3b82f6;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#202129;--color-theme-400:#17171a;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#262735;--color-theme-300:#1c1e27;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#22262e;--color-theme-300:#1c1f24;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], _themes.DARK_THEME_MATCH);
|
|
10
10
|
//# sourceMappingURL=GlobalStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","names":["_styledComponents","require","_themes","GlobalStyle","exports","createGlobalStyle","DARK_THEME_MATCH"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nimport { DARK_THEME_MATCH } from \"../utils/themes\";\n\nexport const GlobalStyle = createGlobalStyle`\n :root {\n --color-primary: #5d2bff;\n --color-secondary: #5d2bff;\n\n --color-theme-100: #ffffff;\n --color-theme-200: #f6f6f9;\n --color-theme-300: #ebebee;\n --color-theme-400: #d7d7da;\n --color-theme-500: #b9b9bd;\n --color-theme-600: #89898e;\n --color-theme-700: #6d6d73;\n --color-theme-800: #5b5b61;\n --color-theme-900: #303037;\n\n --color-primary-200: rgba(93, 43, 255, 0.05);\n --color-primary-300: rgba(93, 43, 255, 0.1);\n --color-primary-400: rgba(93, 43, 255, 0.25);\n --color-primary-500: rgba(93, 43, 255, 0.5);\n --color-primary-600: rgba(93, 43, 255, 0.75);\n --color-primary-700: #5d2bff;\n --color-primary-800: #4a21cd;\n --color-primary-900: #32178b;\n\n --color-secondary-200: rgba(93, 43, 255, 0.05);\n --color-secondary-300: rgba(93, 43, 255, 0.1);\n --color-secondary-400: rgba(93, 43, 255, 0.25);\n --color-secondary-500: rgba(93, 43, 255, 0.5);\n --color-secondary-600: rgba(93, 43, 255, 0.75);\n --color-secondary-700: #5d2bff;\n --color-secondary-800: #4a21cd;\n --color-secondary-900: #32178b;\n\n --color-theme-transparent-200: rgba(36,36,76,0.04);\n --color-theme-transparent-300: rgba(48,48,55,0.1);\n --color-theme-transparent-400: rgba(48,48,55,0.2);\n --color-theme-transparent-500: rgba(48,48,55,0.34);\n --color-theme-transparent-600: rgba(48,48,55,0.57);\n --color-theme-transparent-700: rgba(48,48,55,0.7);\n --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n --color-primary-opaque-300: #efeaff;\n --color-primary-opaque-400: #d6caff;\n\n --color-secondary-opaque-300: #efeaff;\n --color-secondary-opaque-400: #d6caff;\n\n --color-sucess-green: #64cd93;\n --color-pale-green: #c3e799;\n --color-progress-blue: #4182f2;\n\n --color-yellow: #FDF196;\n --color-yellow-darker: #948D5D;\n --color-yellow-lighter: #EBD429;\n --color-orange: #FBBB75;\n --color-orange-darker: #916C43;\n --color-orange-lighter: #E99841;\n --color-beige: #EAC2AD;\n --color-beige-darker: #877064;\n --color-beige-lighter: #B98A72;\n --color-pink: #FBD6E7;\n --color-pink-darker: #917C86;\n --color-pink-lighter: #E4A1C0;\n --color-coral: #FF9C9C;\n --color-coral-darker: #945A5A;\n --color-coral-lighter: #DB4545;\n --color-purple-dirty: #C49CB6;\n --color-purple-dirty-darker: #715A69;\n --color-purple-dirty-lighter: #B16E9A;\n --color-purple: #BEACF9;\n --color-purple-darker: #6E6390;\n --color-purple-lighter: #9B86DF;\n --color-blue-aqua: #BDF7FD;\n --color-blue-aqua-darker: #6D8F92;\n --color-blue-aqua-lighter: #7BDDE7;\n --color-blue-pale: #BEEAFF;\n --color-blue-pale-darker: #6E8794;\n --color-blue-pale-lighter: #92BFD4;\n --color-blue-sky: #A0CBFD;\n --color-blue-sky-darker: #5C7592;\n --color-blue-sky-lighter: #568CCB;\n --color-turquoise: #B9E4E0;\n --color-turquoise-darker: #6B8482;\n --color-turquoise-lighter: #70BFB8;\n --color-green-pale: #C3E799;\n --color-green-pale-darker: #718658;\n --color-green-pale-lighter: #80C333;\n --color-green-olive-drab: #98B57C;\n --color-green-olive-drab-darker: #647157;\n --color-green-olive-drab-lighter: #819F65;\n --color-gray-silver: #DDDDDD;\n --color-gray-silver-darker: #808080;\n --color-gray-silver-lighter: #ACACAC;\n --color-gray: #CACACA;\n --color-gray-darker: #757575;\n --color-gray-lighter: #7D7D7D;\n\n --body-bg-main: rgb(244, 245, 247);\n --body-bg-main-transparent: rgba(244, 245, 247, 0);\n --page-paper-main: #ffffff;\n --border-primary: #d7d7da;\n --selectable: #d7d7da;\n --selectable-active: #3b82f6;\n\n --note-bg: #fff9f1;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n 0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n 0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n 0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n --page-paper-main-shadow: rgba(\n 255,\n 255,\n 255,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(244, 245, 247, 0.6);\n\n --highlight-dark: rgba(0, 0, 0, 0.03);\n\n --input-background-color: #ffffff;\n\n /* Consumed by app LESS under the dark-theme selector; every theme must define them so a dark\n theme never inherits another theme's chrome. */\n --color-primary-100: rgba(93, 43, 255, 0.03);\n --color-primary-opaque-200: #f7f4ff;\n --muted-text: #6d6d73;\n --alert-surface: rgba(243, 24, 72, 0.12);\n --muted-surface: #d7d7da;\n --muted-surface-text: #303037;\n --stripe-pattern: #e6e6e9;\n --drop-overlay-bg: rgba(255, 255, 255, 0.93);\n\n --ai-gradient: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n \n --ai-gradient-lighter: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n\n --red-alert: rgb(237, 97, 97);\n\n --warning: #ffcc6b;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --ac-br-4: 4px;\n\n --ac-br-6: 6px;\n\n --ac-br-8: 8px;\n\n --ac-br-rounded: 999px;\n }\n\n .cupcake {\n --color-primary: #29bcdd;\n --color-secondary: #fe6fa7;\n\n --color-primary-200: rgba(41, 188, 221, 0.07);\n --color-primary-300: rgba(41, 188, 221, 0.12);\n --color-primary-400: rgba(41, 188, 221, 0.26);\n --color-primary-500: rgba(41, 188, 221, 0.52);\n --color-primary-600: rgba(41, 188, 221, 0.75);\n --color-primary-700: #29bcdd;\n --color-primary-800: #219fbb;\n --color-primary-900: #1a768b;\n\n --color-secondary-200: rgba(254, 111, 167, 0.07);\n --color-secondary-300: rgba(254, 111, 167, 0.13);\n --color-secondary-400: rgba(254, 111, 167, 0.27);\n --color-secondary-500: rgba(254, 111, 167, 0.52);\n --color-secondary-600: rgba(254, 111, 167, 0.75);\n --color-secondary-700: #fe6fa7;\n --color-secondary-800: #dd6091;\n --color-secondary-900: #ab496f;\n\n --color-primary-opaque-300: #e5f7fb;\n --color-primary-opaque-400: #c8eef6;\n\n --color-secondary-opaque-300: #ffecf4;\n --color-secondary-opaque-400: #ffd8e7;\n\n --color-primary-100: rgba(41, 188, 221, 0.04);\n --color-primary-opaque-200: #f0fafc;\n }\n\n .classic {\n --color-primary: #4182f2;\n --color-secondary: #4182f2;\n\n --color-primary-200: rgba(65, 130, 242, 0.07);\n --color-primary-300: rgba(65, 130, 242, 0.13);\n --color-primary-400: rgba(65, 130, 242, 0.26);\n --color-primary-500: rgba(65, 130, 242, 0.52);\n --color-primary-600: rgba(65, 130, 242, 0.75);\n --color-primary-700: #4182f2;\n --color-primary-800: #356bc8;\n --color-primary-900: #244a8a;\n\n --color-secondary-200: rgba(65, 130, 242, 0.07);\n --color-secondary-300: rgba(65, 130, 242, 0.13);\n --color-secondary-400: rgba(65, 130, 242, 0.26);\n --color-secondary-500: rgba(65, 130, 242, 0.52);\n --color-secondary-600: rgba(65, 130, 242, 0.75);\n --color-secondary-700: #4182f2;\n --color-secondary-800: #356bc8;\n --color-secondary-900: #244a8a;\n\n --color-primary-opaque-300: #e6effd;\n --color-primary-opaque-400: #cedffc;\n\n --color-secondary-opaque-300: #e6effd;\n --color-secondary-opaque-400: #cedffc;\n\n --color-primary-100: rgba(65, 130, 242, 0.04);\n --color-primary-opaque-200: #f2f6fe;\n }\n\n .neon {\n --color-primary: #67ffc8;\n --color-secondary: #67ffc8;\n\n --color-theme-100: #000000;\n --color-theme-200: #292b34;\n --color-theme-300: #23252d;\n --color-theme-400: #17171a;\n --color-theme-500: #6D6D73;\n --color-theme-600: #89898e;\n --color-theme-700: #b0b0b5;\n --color-theme-800: #dfdfe5;\n --color-theme-900: #ffffff;\n\n --color-primary-200: rgba(103, 255, 200, 0.05);\n --color-primary-300: rgba(103, 255, 200, 0.1);\n --color-primary-400: rgba(103, 255, 200, 0.25);\n --color-primary-500: rgba(103, 255, 200, 0.5);\n --color-primary-600: rgba(103, 255, 200, 0.75);\n --color-primary-700: #67ffc8;\n --color-primary-800: #a5ffdf;\n --color-primary-900: #d0fdec;\n\n --color-secondary-200: rgba(103, 255, 200, 0.05);\n --color-secondary-300: rgba(103, 255, 200, 0.1);\n --color-secondary-400: rgba(103, 255, 200, 0.25);\n --color-secondary-500: rgba(103, 255, 200, 0.5);\n --color-secondary-600: rgba(103, 255, 200, 0.75);\n --color-secondary-700: #67ffc8;\n --color-secondary-800: #a5ffdf;\n --color-secondary-900: #d0fdec;\n\n --color-theme-transparent-200: rgba(6,7,8,0.12);\n --color-theme-transparent-300: rgba(6,7,8,0.22);\n --color-theme-transparent-400: rgba(6,7,8,0.5);\n --color-theme-transparent-500: rgba(255,255,255,0.27);\n --color-theme-transparent-600: rgba(255,255,255,0.4);\n --color-theme-transparent-700: rgba(255,255,255,0.6);\n --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n --color-primary-opaque-300: #334447;\n --color-primary-opaque-400: #3c605a;\n\n --color-secondary-opaque-300: #334447;\n --color-secondary-opaque-400: #3c605a;\n\n --body-bg-main: rgb(36, 38, 46);\n --body-bg-main-transparent: rgba(36, 38, 46, 0);\n --page-paper-main: #2f323a;\n --border-primary: #17171a;\n --selectable: #17171a;\n --selectable-active: #3b82f6;\n\n --note-bg: #3d3c3c;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(\n 47,\n 50,\n 58,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(36, 38, 46, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #24262e;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --color-primary-100: rgba(103, 255, 200, 0.08);\n --color-primary-opaque-200: #31403b;\n --muted-text: #cfcfd0;\n --alert-surface: rgba(243, 24, 72, 0.25);\n --muted-surface: #b4b4b8;\n --muted-surface-text: #4a4a4a;\n --stripe-pattern: #524145;\n --drop-overlay-bg: rgba(47, 50, 58, 0.93);\n }\n\n .dracula {\n --color-primary: #bd93f9;\n --color-secondary: #ff79c6;\n\n --color-theme-100: #000000;\n --color-theme-200: #292a39;\n --color-theme-300: #1f212b;\n --color-theme-400: #111217;\n --color-theme-500: #6272a4;\n --color-theme-600: #7d8ab8;\n --color-theme-700: #a4aecd;\n --color-theme-800: #dededa;\n --color-theme-900: #f8f8f2;\n\n --color-primary-200: rgba(189, 147, 249, 0.05);\n --color-primary-300: rgba(189, 147, 249, 0.1);\n --color-primary-400: rgba(189, 147, 249, 0.25);\n --color-primary-500: rgba(189, 147, 249, 0.5);\n --color-primary-600: rgba(189, 147, 249, 0.75);\n --color-primary-700: #bd93f9;\n --color-primary-800: #d2b6fb;\n --color-primary-900: #e4d3fd;\n\n --color-secondary-200: rgba(255, 121, 198, 0.05);\n --color-secondary-300: rgba(255, 121, 198, 0.1);\n --color-secondary-400: rgba(255, 121, 198, 0.25);\n --color-secondary-500: rgba(255, 121, 198, 0.5);\n --color-secondary-600: rgba(255, 121, 198, 0.75);\n --color-secondary-700: #ff79c6;\n --color-secondary-800: #ffa3d7;\n --color-secondary-900: #ffc9e7;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #42385b;\n --color-primary-opaque-400: #534472;\n\n --color-secondary-opaque-300: #543448;\n --color-secondary-opaque-400: #6f435f;\n\n --body-bg-main: rgb(32, 34, 44);\n --body-bg-main-transparent: rgba(32, 34, 44, 0);\n --page-paper-main: #2c2f3c;\n --border-primary: #111217;\n --selectable: #111217;\n --selectable-active: #3b82f6;\n\n --note-bg: #323026;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(44, 47, 60, 0);\n\n --modal-background: rgba(32, 34, 44, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191a22;\n\n --color-primary-100: rgba(189, 147, 249, 0.08);\n --color-primary-opaque-200: #302c3e;\n --muted-text: #d0d0cb;\n --alert-surface: rgba(255, 85, 85, 0.25);\n --muted-surface: #a9aec4;\n --muted-surface-text: #282a36;\n --stripe-pattern: #503d47;\n --drop-overlay-bg: rgba(44, 47, 60, 0.93);\n }\n\n .one-dark {\n --color-primary: #61afef;\n --color-secondary: #c678dd;\n\n --color-theme-100: #000000;\n --color-theme-200: #272c35;\n --color-theme-300: #1e2127;\n --color-theme-400: #191c21;\n --color-theme-500: #5c6370;\n --color-theme-600: #767d8a;\n --color-theme-700: #9aa2b1;\n --color-theme-800: #cdd3de;\n --color-theme-900: #dcdfe4;\n\n --color-primary-200: rgba(97, 175, 239, 0.05);\n --color-primary-300: rgba(97, 175, 239, 0.1);\n --color-primary-400: rgba(97, 175, 239, 0.25);\n --color-primary-500: rgba(97, 175, 239, 0.5);\n --color-primary-600: rgba(97, 175, 239, 0.75);\n --color-primary-700: #61afef;\n --color-primary-800: #8ec6f4;\n --color-primary-900: #bcdcf9;\n\n --color-secondary-200: rgba(198, 120, 221, 0.05);\n --color-secondary-300: rgba(198, 120, 221, 0.1);\n --color-secondary-400: rgba(198, 120, 221, 0.25);\n --color-secondary-500: rgba(198, 120, 221, 0.5);\n --color-secondary-600: rgba(198, 120, 221, 0.75);\n --color-secondary-700: #c678dd;\n --color-secondary-800: #d79ce8;\n --color-secondary-900: #e8c2f2;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #2d3e51;\n --color-primary-opaque-400: #364e65;\n\n --color-secondary-opaque-300: #402e47;\n --color-secondary-opaque-400: #543b5d;\n\n --body-bg-main: rgb(32, 35, 42);\n --body-bg-main-transparent: rgba(32, 35, 42, 0);\n --page-paper-main: #292d35;\n --border-primary: #191c21;\n --selectable: #191c21;\n --selectable-active: #3b82f6;\n\n --note-bg: #302e28;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(41, 45, 53, 0);\n\n --modal-background: rgba(32, 35, 42, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191c21;\n\n --color-primary-100: rgba(97, 175, 239, 0.08);\n --color-primary-opaque-200: #25313e;\n --muted-text: #c5cbd6;\n --alert-surface: rgba(224, 108, 117, 0.25);\n --muted-surface: #a3aab8;\n --muted-surface-text: #282c34;\n --stripe-pattern: #4b3e41;\n --drop-overlay-bg: rgba(41, 45, 53, 0.93);\n }\n\n html {\n color-scheme: light;\n\n &${DARK_THEME_MATCH} {\n color-scheme: dark;\n }\n }\n\n .ac-shadow,\n .ac-shadow--raised {\n &--lg {\n box-shadow: var(--shadow-primary);\n }\n &--sm {\n box-shadow: var(--shadow-tertiary);\n }\n }\n\n .ac-shadow--raised {\n &--lg {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-primary-hover);\n }\n }\n &--sm {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-tertiary-hover);\n }\n }\n }\n\n .ac-shadow-optimized--sm {\n position: relative;\n box-shadow: var(--shadow-tertiary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-tertiary);\n opacity: 0;\n border-radius: var(--ac-br-6);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-shadow-optimized--lg {\n position: relative;\n box-shadow: var(--shadow-primary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-primary);\n opacity: 0;\n border-radius: var(--ac-br-8);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-border-radius {\n &-4 {\n border-radius: var(--ac-br-4);\n }\n\n &-6 {\n border-radius: var(--ac-br-6);\n }\n\n &-8 {\n border-radius: var(--ac-br-8);\n }\n\n &-rounded {\n border-radius: var(--ac-br-rounded);\n }\n }\n\n\n // CSS Tooltip ::after content: data-tooltip\n\n .c-cooltip {\n position: relative;\n\n /*\n * Prefer scoped variables in this case.\n * This lines of CSS should be scoped too.\n */\n\n --cooltip-spacing: 0.5rem;\n --cooltip-padding: 0.25rem 0.625rem;\n --cooltip-max-width: 12.5rem;\n\n --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n --cooltip-transition-delay: 0.6s;\n --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n }\n\n .c-cooltip::after {\n /*\n * will-change is intended to be used as a last resort,\n * in order to try to deal with existing performance problems.\n * It should not be used to anticipate performance problems.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n *\n * will-change: transform, opacity\n */\n pointer-events: none;\n content: attr(data-tooltip);\n position: absolute;\n color: #fff;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.9);\n border-radius: 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.3;\n max-width: var(--cooltip-max-width);\n padding: var(--cooltip-padding);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .c-cooltip--top::after {\n bottom: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--right::after {\n left: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n .c-cooltip--bottom::after {\n top: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--left::after {\n right: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n /*\n * Make sure that disabled and aria pressed\n * items do not have tooltips available.\n */\n .c-cooltip:disabled::after,\n [aria-pressed=\"true\"]::after {\n display: none;\n }\n\n /*\n *\n * Only use hover when is available .\n * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n */\n @media (hover: hover) {\n /*\n * Here we maybe have a complex selector but actually it's not.\n * We simply asks here to show tooltip only on hover.\n * Focused elements (in this case, clicked elements) should hide the tooltip.\n */\n .c-cooltip--top:not(:focus):hover::after,\n .c-cooltip--bottom:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1) translateX(-50%);\n opacity: 1;\n }\n\n /*\n *\n * This is not code duplication!\n * Transform properties are tricky to animate and values\n * are not the same depending on the tooltip position.\n *\n * Animating only one transform, eg. scale(1) will\n * override all previously set transforms, eg. translateY.\n * So we need to always chain them.\n * eg. transform: scale(1) translateY(-50%) etc...\n */\n\n .c-cooltip--right:not(:focus):hover::after,\n .c-cooltip--left:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1);\n opacity: 1;\n }\n }\n\n .c-date-picker--calendar {\n width: 260px;\n padding: 16px 0px 8px 0px;\n margin: auto;\n background-color: var(--page-paper-main);\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEO,IAAME,WAAW,GAAAC,OAAA,CAAAD,WAAA,OAAGE,mCAAiB,w6gBA4frCC,wBAAgB,CAoOtB","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","names":["_styledComponents","require","_themes","GlobalStyle","exports","createGlobalStyle","DARK_THEME_MATCH"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nimport { DARK_THEME_MATCH } from \"../utils/themes\";\n\nexport const GlobalStyle = createGlobalStyle`\n :root {\n --color-primary: #5d2bff;\n --color-secondary: #5d2bff;\n\n --color-theme-100: #ffffff;\n --color-theme-200: #f6f6f9;\n --color-theme-300: #ebebee;\n --color-theme-400: #d7d7da;\n --color-theme-500: #b9b9bd;\n --color-theme-600: #89898e;\n --color-theme-700: #6d6d73;\n --color-theme-800: #5b5b61;\n --color-theme-900: #303037;\n\n --color-primary-200: rgba(93, 43, 255, 0.05);\n --color-primary-300: rgba(93, 43, 255, 0.1);\n --color-primary-400: rgba(93, 43, 255, 0.25);\n --color-primary-500: rgba(93, 43, 255, 0.5);\n --color-primary-600: rgba(93, 43, 255, 0.75);\n --color-primary-700: #5d2bff;\n --color-primary-800: #4a21cd;\n --color-primary-900: #32178b;\n\n --color-secondary-200: rgba(93, 43, 255, 0.05);\n --color-secondary-300: rgba(93, 43, 255, 0.1);\n --color-secondary-400: rgba(93, 43, 255, 0.25);\n --color-secondary-500: rgba(93, 43, 255, 0.5);\n --color-secondary-600: rgba(93, 43, 255, 0.75);\n --color-secondary-700: #5d2bff;\n --color-secondary-800: #4a21cd;\n --color-secondary-900: #32178b;\n\n --color-theme-transparent-200: rgba(36,36,76,0.04);\n --color-theme-transparent-300: rgba(48,48,55,0.1);\n --color-theme-transparent-400: rgba(48,48,55,0.2);\n --color-theme-transparent-500: rgba(48,48,55,0.34);\n --color-theme-transparent-600: rgba(48,48,55,0.57);\n --color-theme-transparent-700: rgba(48,48,55,0.7);\n --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n --color-primary-opaque-300: #efeaff;\n --color-primary-opaque-400: #d6caff;\n\n --color-secondary-opaque-300: #efeaff;\n --color-secondary-opaque-400: #d6caff;\n\n --color-sucess-green: #64cd93;\n --color-pale-green: #c3e799;\n --color-progress-blue: #4182f2;\n\n --color-yellow: #FDF196;\n --color-yellow-darker: #948D5D;\n --color-yellow-lighter: #EBD429;\n --color-orange: #FBBB75;\n --color-orange-darker: #916C43;\n --color-orange-lighter: #E99841;\n --color-beige: #EAC2AD;\n --color-beige-darker: #877064;\n --color-beige-lighter: #B98A72;\n --color-pink: #FBD6E7;\n --color-pink-darker: #917C86;\n --color-pink-lighter: #E4A1C0;\n --color-coral: #FF9C9C;\n --color-coral-darker: #945A5A;\n --color-coral-lighter: #DB4545;\n --color-purple-dirty: #C49CB6;\n --color-purple-dirty-darker: #715A69;\n --color-purple-dirty-lighter: #B16E9A;\n --color-purple: #BEACF9;\n --color-purple-darker: #6E6390;\n --color-purple-lighter: #9B86DF;\n --color-blue-aqua: #BDF7FD;\n --color-blue-aqua-darker: #6D8F92;\n --color-blue-aqua-lighter: #7BDDE7;\n --color-blue-pale: #BEEAFF;\n --color-blue-pale-darker: #6E8794;\n --color-blue-pale-lighter: #92BFD4;\n --color-blue-sky: #A0CBFD;\n --color-blue-sky-darker: #5C7592;\n --color-blue-sky-lighter: #568CCB;\n --color-turquoise: #B9E4E0;\n --color-turquoise-darker: #6B8482;\n --color-turquoise-lighter: #70BFB8;\n --color-green-pale: #C3E799;\n --color-green-pale-darker: #718658;\n --color-green-pale-lighter: #80C333;\n --color-green-olive-drab: #98B57C;\n --color-green-olive-drab-darker: #647157;\n --color-green-olive-drab-lighter: #819F65;\n --color-gray-silver: #DDDDDD;\n --color-gray-silver-darker: #808080;\n --color-gray-silver-lighter: #ACACAC;\n --color-gray: #CACACA;\n --color-gray-darker: #757575;\n --color-gray-lighter: #7D7D7D;\n\n --body-bg-main: rgb(244, 245, 247);\n --body-bg-main-transparent: rgba(244, 245, 247, 0);\n --page-paper-main: #ffffff;\n --border-primary: #d7d7da;\n --selectable: #d7d7da;\n --selectable-active: #3b82f6;\n\n --note-bg: #fff9f1;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n 0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n 0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n 0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n --page-paper-main-shadow: rgba(\n 255,\n 255,\n 255,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(244, 245, 247, 0.6);\n\n --highlight-dark: rgba(0, 0, 0, 0.03);\n\n --input-background-color: #ffffff;\n\n /* Consumed by app LESS under the dark-theme selector; every theme must define them so a dark\n theme never inherits another theme's chrome. */\n --color-primary-100: rgba(93, 43, 255, 0.03);\n --color-primary-opaque-200: #f7f4ff;\n --muted-text: #6d6d73;\n --alert-surface: rgba(243, 24, 72, 0.12);\n --muted-surface: #d7d7da;\n --muted-surface-text: #303037;\n --stripe-pattern: #e6e6e9;\n --drop-overlay-bg: rgba(255, 255, 255, 0.93);\n\n --ai-gradient: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n \n --ai-gradient-lighter: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n\n --red-alert: rgb(237, 97, 97);\n\n --warning: #ffcc6b;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --ac-br-4: 4px;\n\n --ac-br-6: 6px;\n\n --ac-br-8: 8px;\n\n --ac-br-rounded: 999px;\n }\n\n .cupcake {\n --color-primary: #29bcdd;\n --color-secondary: #fe6fa7;\n\n --color-primary-200: rgba(41, 188, 221, 0.07);\n --color-primary-300: rgba(41, 188, 221, 0.12);\n --color-primary-400: rgba(41, 188, 221, 0.26);\n --color-primary-500: rgba(41, 188, 221, 0.52);\n --color-primary-600: rgba(41, 188, 221, 0.75);\n --color-primary-700: #29bcdd;\n --color-primary-800: #219fbb;\n --color-primary-900: #1a768b;\n\n --color-secondary-200: rgba(254, 111, 167, 0.07);\n --color-secondary-300: rgba(254, 111, 167, 0.13);\n --color-secondary-400: rgba(254, 111, 167, 0.27);\n --color-secondary-500: rgba(254, 111, 167, 0.52);\n --color-secondary-600: rgba(254, 111, 167, 0.75);\n --color-secondary-700: #fe6fa7;\n --color-secondary-800: #dd6091;\n --color-secondary-900: #ab496f;\n\n --color-primary-opaque-300: #e5f7fb;\n --color-primary-opaque-400: #c8eef6;\n\n --color-secondary-opaque-300: #ffecf4;\n --color-secondary-opaque-400: #ffd8e7;\n\n --color-primary-100: rgba(41, 188, 221, 0.04);\n --color-primary-opaque-200: #f0fafc;\n }\n\n .classic {\n --color-primary: #4182f2;\n --color-secondary: #4182f2;\n\n --color-primary-200: rgba(65, 130, 242, 0.07);\n --color-primary-300: rgba(65, 130, 242, 0.13);\n --color-primary-400: rgba(65, 130, 242, 0.26);\n --color-primary-500: rgba(65, 130, 242, 0.52);\n --color-primary-600: rgba(65, 130, 242, 0.75);\n --color-primary-700: #4182f2;\n --color-primary-800: #356bc8;\n --color-primary-900: #244a8a;\n\n --color-secondary-200: rgba(65, 130, 242, 0.07);\n --color-secondary-300: rgba(65, 130, 242, 0.13);\n --color-secondary-400: rgba(65, 130, 242, 0.26);\n --color-secondary-500: rgba(65, 130, 242, 0.52);\n --color-secondary-600: rgba(65, 130, 242, 0.75);\n --color-secondary-700: #4182f2;\n --color-secondary-800: #356bc8;\n --color-secondary-900: #244a8a;\n\n --color-primary-opaque-300: #e6effd;\n --color-primary-opaque-400: #cedffc;\n\n --color-secondary-opaque-300: #e6effd;\n --color-secondary-opaque-400: #cedffc;\n\n --color-primary-100: rgba(65, 130, 242, 0.04);\n --color-primary-opaque-200: #f2f6fe;\n }\n\n .neon {\n --color-primary: #67ffc8;\n --color-secondary: #67ffc8;\n\n --color-theme-100: #000000;\n --color-theme-200: #292b34;\n --color-theme-300: #202129;\n --color-theme-400: #17171a;\n --color-theme-500: #6D6D73;\n --color-theme-600: #89898e;\n --color-theme-700: #b0b0b5;\n --color-theme-800: #dfdfe5;\n --color-theme-900: #ffffff;\n\n --color-primary-200: rgba(103, 255, 200, 0.05);\n --color-primary-300: rgba(103, 255, 200, 0.1);\n --color-primary-400: rgba(103, 255, 200, 0.25);\n --color-primary-500: rgba(103, 255, 200, 0.5);\n --color-primary-600: rgba(103, 255, 200, 0.75);\n --color-primary-700: #67ffc8;\n --color-primary-800: #a5ffdf;\n --color-primary-900: #d0fdec;\n\n --color-secondary-200: rgba(103, 255, 200, 0.05);\n --color-secondary-300: rgba(103, 255, 200, 0.1);\n --color-secondary-400: rgba(103, 255, 200, 0.25);\n --color-secondary-500: rgba(103, 255, 200, 0.5);\n --color-secondary-600: rgba(103, 255, 200, 0.75);\n --color-secondary-700: #67ffc8;\n --color-secondary-800: #a5ffdf;\n --color-secondary-900: #d0fdec;\n\n --color-theme-transparent-200: rgba(6,7,8,0.12);\n --color-theme-transparent-300: rgba(6,7,8,0.22);\n --color-theme-transparent-400: rgba(6,7,8,0.5);\n --color-theme-transparent-500: rgba(255,255,255,0.27);\n --color-theme-transparent-600: rgba(255,255,255,0.4);\n --color-theme-transparent-700: rgba(255,255,255,0.6);\n --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n --color-primary-opaque-300: #334447;\n --color-primary-opaque-400: #3c605a;\n\n --color-secondary-opaque-300: #334447;\n --color-secondary-opaque-400: #3c605a;\n\n --body-bg-main: rgb(36, 38, 46);\n --body-bg-main-transparent: rgba(36, 38, 46, 0);\n --page-paper-main: #2f323a;\n --border-primary: #17171a;\n --selectable: #17171a;\n --selectable-active: #3b82f6;\n\n --note-bg: #3d3c3c;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(\n 47,\n 50,\n 58,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(36, 38, 46, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #24262e;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --color-primary-100: rgba(103, 255, 200, 0.08);\n --color-primary-opaque-200: #31403b;\n --muted-text: #cfcfd0;\n --alert-surface: rgba(243, 24, 72, 0.25);\n --muted-surface: #b4b4b8;\n --muted-surface-text: #4a4a4a;\n --stripe-pattern: #524145;\n --drop-overlay-bg: rgba(47, 50, 58, 0.93);\n }\n\n .dracula {\n --color-primary: #bd93f9;\n --color-secondary: #ff79c6;\n\n --color-theme-100: #000000;\n --color-theme-200: #262735;\n --color-theme-300: #1c1e27;\n --color-theme-400: #111217;\n --color-theme-500: #6272a4;\n --color-theme-600: #7d8ab8;\n --color-theme-700: #a4aecd;\n --color-theme-800: #dededa;\n --color-theme-900: #f8f8f2;\n\n --color-primary-200: rgba(189, 147, 249, 0.05);\n --color-primary-300: rgba(189, 147, 249, 0.1);\n --color-primary-400: rgba(189, 147, 249, 0.25);\n --color-primary-500: rgba(189, 147, 249, 0.5);\n --color-primary-600: rgba(189, 147, 249, 0.75);\n --color-primary-700: #bd93f9;\n --color-primary-800: #d2b6fb;\n --color-primary-900: #e4d3fd;\n\n --color-secondary-200: rgba(255, 121, 198, 0.05);\n --color-secondary-300: rgba(255, 121, 198, 0.1);\n --color-secondary-400: rgba(255, 121, 198, 0.25);\n --color-secondary-500: rgba(255, 121, 198, 0.5);\n --color-secondary-600: rgba(255, 121, 198, 0.75);\n --color-secondary-700: #ff79c6;\n --color-secondary-800: #ffa3d7;\n --color-secondary-900: #ffc9e7;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #42385b;\n --color-primary-opaque-400: #534472;\n\n --color-secondary-opaque-300: #543448;\n --color-secondary-opaque-400: #6f435f;\n\n --body-bg-main: rgb(32, 34, 44);\n --body-bg-main-transparent: rgba(32, 34, 44, 0);\n --page-paper-main: #2c2f3c;\n --border-primary: #111217;\n --selectable: #111217;\n --selectable-active: #3b82f6;\n\n --note-bg: #323026;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(44, 47, 60, 0);\n\n --modal-background: rgba(32, 34, 44, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191a22;\n\n --color-primary-100: rgba(189, 147, 249, 0.08);\n --color-primary-opaque-200: #302c3e;\n --muted-text: #d0d0cb;\n --alert-surface: rgba(255, 85, 85, 0.25);\n --muted-surface: #a9aec4;\n --muted-surface-text: #282a36;\n --stripe-pattern: #503d47;\n --drop-overlay-bg: rgba(44, 47, 60, 0.93);\n }\n\n .one-dark {\n --color-primary: #61afef;\n --color-secondary: #c678dd;\n\n --color-theme-100: #000000;\n --color-theme-200: #22262e;\n --color-theme-300: #1c1f24;\n --color-theme-400: #191c21;\n --color-theme-500: #5c6370;\n --color-theme-600: #767d8a;\n --color-theme-700: #9aa2b1;\n --color-theme-800: #cdd3de;\n --color-theme-900: #dcdfe4;\n\n --color-primary-200: rgba(97, 175, 239, 0.05);\n --color-primary-300: rgba(97, 175, 239, 0.1);\n --color-primary-400: rgba(97, 175, 239, 0.25);\n --color-primary-500: rgba(97, 175, 239, 0.5);\n --color-primary-600: rgba(97, 175, 239, 0.75);\n --color-primary-700: #61afef;\n --color-primary-800: #8ec6f4;\n --color-primary-900: #bcdcf9;\n\n --color-secondary-200: rgba(198, 120, 221, 0.05);\n --color-secondary-300: rgba(198, 120, 221, 0.1);\n --color-secondary-400: rgba(198, 120, 221, 0.25);\n --color-secondary-500: rgba(198, 120, 221, 0.5);\n --color-secondary-600: rgba(198, 120, 221, 0.75);\n --color-secondary-700: #c678dd;\n --color-secondary-800: #d79ce8;\n --color-secondary-900: #e8c2f2;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #2d3e51;\n --color-primary-opaque-400: #364e65;\n\n --color-secondary-opaque-300: #402e47;\n --color-secondary-opaque-400: #543b5d;\n\n --body-bg-main: rgb(32, 35, 42);\n --body-bg-main-transparent: rgba(32, 35, 42, 0);\n --page-paper-main: #292d35;\n --border-primary: #191c21;\n --selectable: #191c21;\n --selectable-active: #3b82f6;\n\n --note-bg: #302e28;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(41, 45, 53, 0);\n\n --modal-background: rgba(32, 35, 42, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191c21;\n\n --color-primary-100: rgba(97, 175, 239, 0.08);\n --color-primary-opaque-200: #25313e;\n --muted-text: #c5cbd6;\n --alert-surface: rgba(224, 108, 117, 0.25);\n --muted-surface: #a3aab8;\n --muted-surface-text: #282c34;\n --stripe-pattern: #4b3e41;\n --drop-overlay-bg: rgba(41, 45, 53, 0.93);\n }\n\n html {\n color-scheme: light;\n\n &${DARK_THEME_MATCH} {\n color-scheme: dark;\n }\n }\n\n .ac-shadow,\n .ac-shadow--raised {\n &--lg {\n box-shadow: var(--shadow-primary);\n }\n &--sm {\n box-shadow: var(--shadow-tertiary);\n }\n }\n\n .ac-shadow--raised {\n &--lg {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-primary-hover);\n }\n }\n &--sm {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-tertiary-hover);\n }\n }\n }\n\n .ac-shadow-optimized--sm {\n position: relative;\n box-shadow: var(--shadow-tertiary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-tertiary);\n opacity: 0;\n border-radius: var(--ac-br-6);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-shadow-optimized--lg {\n position: relative;\n box-shadow: var(--shadow-primary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-primary);\n opacity: 0;\n border-radius: var(--ac-br-8);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-border-radius {\n &-4 {\n border-radius: var(--ac-br-4);\n }\n\n &-6 {\n border-radius: var(--ac-br-6);\n }\n\n &-8 {\n border-radius: var(--ac-br-8);\n }\n\n &-rounded {\n border-radius: var(--ac-br-rounded);\n }\n }\n\n\n // CSS Tooltip ::after content: data-tooltip\n\n .c-cooltip {\n position: relative;\n\n /*\n * Prefer scoped variables in this case.\n * This lines of CSS should be scoped too.\n */\n\n --cooltip-spacing: 0.5rem;\n --cooltip-padding: 0.25rem 0.625rem;\n --cooltip-max-width: 12.5rem;\n\n --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n --cooltip-transition-delay: 0.6s;\n --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n }\n\n .c-cooltip::after {\n /*\n * will-change is intended to be used as a last resort,\n * in order to try to deal with existing performance problems.\n * It should not be used to anticipate performance problems.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n *\n * will-change: transform, opacity\n */\n pointer-events: none;\n content: attr(data-tooltip);\n position: absolute;\n color: #fff;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.9);\n border-radius: 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.3;\n max-width: var(--cooltip-max-width);\n padding: var(--cooltip-padding);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .c-cooltip--top::after {\n bottom: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--right::after {\n left: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n .c-cooltip--bottom::after {\n top: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--left::after {\n right: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n /*\n * Make sure that disabled and aria pressed\n * items do not have tooltips available.\n */\n .c-cooltip:disabled::after,\n [aria-pressed=\"true\"]::after {\n display: none;\n }\n\n /*\n *\n * Only use hover when is available .\n * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n */\n @media (hover: hover) {\n /*\n * Here we maybe have a complex selector but actually it's not.\n * We simply asks here to show tooltip only on hover.\n * Focused elements (in this case, clicked elements) should hide the tooltip.\n */\n .c-cooltip--top:not(:focus):hover::after,\n .c-cooltip--bottom:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1) translateX(-50%);\n opacity: 1;\n }\n\n /*\n *\n * This is not code duplication!\n * Transform properties are tricky to animate and values\n * are not the same depending on the tooltip position.\n *\n * Animating only one transform, eg. scale(1) will\n * override all previously set transforms, eg. translateY.\n * So we need to always chain them.\n * eg. transform: scale(1) translateY(-50%) etc...\n */\n\n .c-cooltip--right:not(:focus):hover::after,\n .c-cooltip--left:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1);\n opacity: 1;\n }\n }\n\n .c-date-picker--calendar {\n width: 260px;\n padding: 16px 0px 8px 0px;\n margin: auto;\n background-color: var(--page-paper-main);\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEO,IAAME,WAAW,GAAAC,OAAA,CAAAD,WAAA,OAAGE,mCAAiB,w6gBA4frCC,wBAAgB,CAoOtB","ignoreList":[]}
|
|
@@ -48,6 +48,7 @@ var Window = exports.Window = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
|
|
|
48
48
|
var handleKeyDown = (0, _react.useCallback)(function (event) {
|
|
49
49
|
if (!event.defaultPrevented && (event.key === "Esc" || event.key === "Escape") && !disableCloseOnEsc) {
|
|
50
50
|
event.preventDefault();
|
|
51
|
+
event.stopPropagation();
|
|
51
52
|
if (onClose) {
|
|
52
53
|
onClose();
|
|
53
54
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Window.js","names":["_react","_interopRequireWildcard","require","_reactFocusLock","_interopRequireDefault","_reactRemoveScroll","_classnames","_Style","_helpers","_utils","_useForkRef","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","indexOf","propertyIsEnumerable","returnFocus","preventScroll","Window","exports","forwardRef","_ref","ref","children","onClose","className","style","onKeyDown","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableCloseOnEs","disableCloseOnEsc","onClick","rest","innerRef","useRef","handleRef","useForkRef","_useLayerContext","useLayerContext","_useLayerContext$zInd","zIndex","layers","skyscraper","handleKeyDown","useCallback","event","defaultPrevented","key","preventDefault","handleClick","stopPropagation","createElement","Portal","disabled","RemoveScroll","forwardProps","enabled","noIsolation","StyledWindow","tabIndex","classnames","displayName"],"sources":["../../../../src/components/Window/Window.tsx"],"sourcesContent":["import React, { useCallback, useRef, forwardRef, KeyboardEvent } from \"react\";\nimport FocusLock from \"react-focus-lock\";\nimport { RemoveScroll } from \"react-remove-scroll\";\n\nimport classnames from \"classnames\";\n\nimport { StyledWindow } from \"./Style\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { layers } from \"../../utils\";\nimport useForkRef from \"../../utils/useForkRef\";\n\nexport interface IWindow {\n onClose?: () => void;\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableCloseOnEsc?: boolean;\n}\n\nconst returnFocus = { preventScroll: true };\n\nexport const Window = forwardRef<\n HTMLDivElement,\n IWindow & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IWindow>\n>(\n (\n {\n children,\n onClose,\n className,\n style,\n onKeyDown,\n disableFocusLock = false,\n disableScrollLock = false,\n disableCloseOnEsc = false,\n onClick,\n ...rest\n },\n ref\n ) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n const { zIndex = layers.skyscraper } = useLayerContext();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (\n !event.defaultPrevented &&\n (event.key === \"Esc\" || event.key === \"Escape\") &&\n !disableCloseOnEsc\n ) {\n event.preventDefault();\n if (onClose) {\n onClose();\n }\n }\n if (typeof onKeyDown === \"function\") {\n onKeyDown(event);\n }\n },\n [disableCloseOnEsc, onClose, onKeyDown]\n );\n\n const handleClick = useCallback(\n (event) => {\n event?.stopPropagation();\n typeof onClick === \"function\" && onClick(event);\n },\n [onClick]\n );\n\n return (\n <Portal>\n <FocusLock returnFocus={returnFocus} disabled={disableFocusLock}>\n <RemoveScroll\n forwardProps\n ref={handleRef}\n enabled={!disableScrollLock}\n noIsolation\n >\n <StyledWindow\n {...rest}\n style={{ zIndex, ...style }}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n className={classnames(\"c-window\", className)}\n onClick={handleClick}\n >\n {children}\n </StyledWindow>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n );\n }\n);\n\nWindow.displayName = \"Window\";\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Window.js","names":["_react","_interopRequireWildcard","require","_reactFocusLock","_interopRequireDefault","_reactRemoveScroll","_classnames","_Style","_helpers","_utils","_useForkRef","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","indexOf","propertyIsEnumerable","returnFocus","preventScroll","Window","exports","forwardRef","_ref","ref","children","onClose","className","style","onKeyDown","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableCloseOnEs","disableCloseOnEsc","onClick","rest","innerRef","useRef","handleRef","useForkRef","_useLayerContext","useLayerContext","_useLayerContext$zInd","zIndex","layers","skyscraper","handleKeyDown","useCallback","event","defaultPrevented","key","preventDefault","stopPropagation","handleClick","createElement","Portal","disabled","RemoveScroll","forwardProps","enabled","noIsolation","StyledWindow","tabIndex","classnames","displayName"],"sources":["../../../../src/components/Window/Window.tsx"],"sourcesContent":["import React, { useCallback, useRef, forwardRef, KeyboardEvent } from \"react\";\nimport FocusLock from \"react-focus-lock\";\nimport { RemoveScroll } from \"react-remove-scroll\";\n\nimport classnames from \"classnames\";\n\nimport { StyledWindow } from \"./Style\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { layers } from \"../../utils\";\nimport useForkRef from \"../../utils/useForkRef\";\n\nexport interface IWindow {\n onClose?: () => void;\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableCloseOnEsc?: boolean;\n}\n\nconst returnFocus = { preventScroll: true };\n\nexport const Window = forwardRef<\n HTMLDivElement,\n IWindow & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IWindow>\n>(\n (\n {\n children,\n onClose,\n className,\n style,\n onKeyDown,\n disableFocusLock = false,\n disableScrollLock = false,\n disableCloseOnEsc = false,\n onClick,\n ...rest\n },\n ref\n ) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n const { zIndex = layers.skyscraper } = useLayerContext();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (\n !event.defaultPrevented &&\n (event.key === \"Esc\" || event.key === \"Escape\") &&\n !disableCloseOnEsc\n ) {\n event.preventDefault();\n event.stopPropagation();\n if (onClose) {\n onClose();\n }\n }\n if (typeof onKeyDown === \"function\") {\n onKeyDown(event);\n }\n },\n [disableCloseOnEsc, onClose, onKeyDown]\n );\n\n const handleClick = useCallback(\n (event) => {\n event?.stopPropagation();\n typeof onClick === \"function\" && onClick(event);\n },\n [onClick]\n );\n\n return (\n <Portal>\n <FocusLock returnFocus={returnFocus} disabled={disableFocusLock}>\n <RemoveScroll\n forwardProps\n ref={handleRef}\n enabled={!disableScrollLock}\n noIsolation\n >\n <StyledWindow\n {...rest}\n style={{ zIndex, ...style }}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n className={classnames(\"c-window\", className)}\n onClick={handleClick}\n >\n {children}\n </StyledWindow>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n );\n }\n);\n\nWindow.displayName = \"Window\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { createGlobalStyle } from "styled-components";
|
|
2
2
|
import { DARK_THEME_MATCH } from "../utils/themes";
|
|
3
|
-
export const GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--selectable:#d7d7da;--selectable-active:#3b82f6;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#23252d;--color-theme-400:#17171a;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#292a39;--color-theme-300:#1f212b;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#272c35;--color-theme-300:#1e2127;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], DARK_THEME_MATCH);
|
|
3
|
+
export const GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--selectable:#d7d7da;--selectable-active:#3b82f6;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#202129;--color-theme-400:#17171a;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#262735;--color-theme-300:#1c1e27;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#22262e;--color-theme-300:#1c1f24;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], DARK_THEME_MATCH);
|
|
4
4
|
//# sourceMappingURL=GlobalStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","names":["createGlobalStyle","DARK_THEME_MATCH","GlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nimport { DARK_THEME_MATCH } from \"../utils/themes\";\n\nexport const GlobalStyle = createGlobalStyle`\n :root {\n --color-primary: #5d2bff;\n --color-secondary: #5d2bff;\n\n --color-theme-100: #ffffff;\n --color-theme-200: #f6f6f9;\n --color-theme-300: #ebebee;\n --color-theme-400: #d7d7da;\n --color-theme-500: #b9b9bd;\n --color-theme-600: #89898e;\n --color-theme-700: #6d6d73;\n --color-theme-800: #5b5b61;\n --color-theme-900: #303037;\n\n --color-primary-200: rgba(93, 43, 255, 0.05);\n --color-primary-300: rgba(93, 43, 255, 0.1);\n --color-primary-400: rgba(93, 43, 255, 0.25);\n --color-primary-500: rgba(93, 43, 255, 0.5);\n --color-primary-600: rgba(93, 43, 255, 0.75);\n --color-primary-700: #5d2bff;\n --color-primary-800: #4a21cd;\n --color-primary-900: #32178b;\n\n --color-secondary-200: rgba(93, 43, 255, 0.05);\n --color-secondary-300: rgba(93, 43, 255, 0.1);\n --color-secondary-400: rgba(93, 43, 255, 0.25);\n --color-secondary-500: rgba(93, 43, 255, 0.5);\n --color-secondary-600: rgba(93, 43, 255, 0.75);\n --color-secondary-700: #5d2bff;\n --color-secondary-800: #4a21cd;\n --color-secondary-900: #32178b;\n\n --color-theme-transparent-200: rgba(36,36,76,0.04);\n --color-theme-transparent-300: rgba(48,48,55,0.1);\n --color-theme-transparent-400: rgba(48,48,55,0.2);\n --color-theme-transparent-500: rgba(48,48,55,0.34);\n --color-theme-transparent-600: rgba(48,48,55,0.57);\n --color-theme-transparent-700: rgba(48,48,55,0.7);\n --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n --color-primary-opaque-300: #efeaff;\n --color-primary-opaque-400: #d6caff;\n\n --color-secondary-opaque-300: #efeaff;\n --color-secondary-opaque-400: #d6caff;\n\n --color-sucess-green: #64cd93;\n --color-pale-green: #c3e799;\n --color-progress-blue: #4182f2;\n\n --color-yellow: #FDF196;\n --color-yellow-darker: #948D5D;\n --color-yellow-lighter: #EBD429;\n --color-orange: #FBBB75;\n --color-orange-darker: #916C43;\n --color-orange-lighter: #E99841;\n --color-beige: #EAC2AD;\n --color-beige-darker: #877064;\n --color-beige-lighter: #B98A72;\n --color-pink: #FBD6E7;\n --color-pink-darker: #917C86;\n --color-pink-lighter: #E4A1C0;\n --color-coral: #FF9C9C;\n --color-coral-darker: #945A5A;\n --color-coral-lighter: #DB4545;\n --color-purple-dirty: #C49CB6;\n --color-purple-dirty-darker: #715A69;\n --color-purple-dirty-lighter: #B16E9A;\n --color-purple: #BEACF9;\n --color-purple-darker: #6E6390;\n --color-purple-lighter: #9B86DF;\n --color-blue-aqua: #BDF7FD;\n --color-blue-aqua-darker: #6D8F92;\n --color-blue-aqua-lighter: #7BDDE7;\n --color-blue-pale: #BEEAFF;\n --color-blue-pale-darker: #6E8794;\n --color-blue-pale-lighter: #92BFD4;\n --color-blue-sky: #A0CBFD;\n --color-blue-sky-darker: #5C7592;\n --color-blue-sky-lighter: #568CCB;\n --color-turquoise: #B9E4E0;\n --color-turquoise-darker: #6B8482;\n --color-turquoise-lighter: #70BFB8;\n --color-green-pale: #C3E799;\n --color-green-pale-darker: #718658;\n --color-green-pale-lighter: #80C333;\n --color-green-olive-drab: #98B57C;\n --color-green-olive-drab-darker: #647157;\n --color-green-olive-drab-lighter: #819F65;\n --color-gray-silver: #DDDDDD;\n --color-gray-silver-darker: #808080;\n --color-gray-silver-lighter: #ACACAC;\n --color-gray: #CACACA;\n --color-gray-darker: #757575;\n --color-gray-lighter: #7D7D7D;\n\n --body-bg-main: rgb(244, 245, 247);\n --body-bg-main-transparent: rgba(244, 245, 247, 0);\n --page-paper-main: #ffffff;\n --border-primary: #d7d7da;\n --selectable: #d7d7da;\n --selectable-active: #3b82f6;\n\n --note-bg: #fff9f1;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n 0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n 0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n 0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n --page-paper-main-shadow: rgba(\n 255,\n 255,\n 255,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(244, 245, 247, 0.6);\n\n --highlight-dark: rgba(0, 0, 0, 0.03);\n\n --input-background-color: #ffffff;\n\n /* Consumed by app LESS under the dark-theme selector; every theme must define them so a dark\n theme never inherits another theme's chrome. */\n --color-primary-100: rgba(93, 43, 255, 0.03);\n --color-primary-opaque-200: #f7f4ff;\n --muted-text: #6d6d73;\n --alert-surface: rgba(243, 24, 72, 0.12);\n --muted-surface: #d7d7da;\n --muted-surface-text: #303037;\n --stripe-pattern: #e6e6e9;\n --drop-overlay-bg: rgba(255, 255, 255, 0.93);\n\n --ai-gradient: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n \n --ai-gradient-lighter: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n\n --red-alert: rgb(237, 97, 97);\n\n --warning: #ffcc6b;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --ac-br-4: 4px;\n\n --ac-br-6: 6px;\n\n --ac-br-8: 8px;\n\n --ac-br-rounded: 999px;\n }\n\n .cupcake {\n --color-primary: #29bcdd;\n --color-secondary: #fe6fa7;\n\n --color-primary-200: rgba(41, 188, 221, 0.07);\n --color-primary-300: rgba(41, 188, 221, 0.12);\n --color-primary-400: rgba(41, 188, 221, 0.26);\n --color-primary-500: rgba(41, 188, 221, 0.52);\n --color-primary-600: rgba(41, 188, 221, 0.75);\n --color-primary-700: #29bcdd;\n --color-primary-800: #219fbb;\n --color-primary-900: #1a768b;\n\n --color-secondary-200: rgba(254, 111, 167, 0.07);\n --color-secondary-300: rgba(254, 111, 167, 0.13);\n --color-secondary-400: rgba(254, 111, 167, 0.27);\n --color-secondary-500: rgba(254, 111, 167, 0.52);\n --color-secondary-600: rgba(254, 111, 167, 0.75);\n --color-secondary-700: #fe6fa7;\n --color-secondary-800: #dd6091;\n --color-secondary-900: #ab496f;\n\n --color-primary-opaque-300: #e5f7fb;\n --color-primary-opaque-400: #c8eef6;\n\n --color-secondary-opaque-300: #ffecf4;\n --color-secondary-opaque-400: #ffd8e7;\n\n --color-primary-100: rgba(41, 188, 221, 0.04);\n --color-primary-opaque-200: #f0fafc;\n }\n\n .classic {\n --color-primary: #4182f2;\n --color-secondary: #4182f2;\n\n --color-primary-200: rgba(65, 130, 242, 0.07);\n --color-primary-300: rgba(65, 130, 242, 0.13);\n --color-primary-400: rgba(65, 130, 242, 0.26);\n --color-primary-500: rgba(65, 130, 242, 0.52);\n --color-primary-600: rgba(65, 130, 242, 0.75);\n --color-primary-700: #4182f2;\n --color-primary-800: #356bc8;\n --color-primary-900: #244a8a;\n\n --color-secondary-200: rgba(65, 130, 242, 0.07);\n --color-secondary-300: rgba(65, 130, 242, 0.13);\n --color-secondary-400: rgba(65, 130, 242, 0.26);\n --color-secondary-500: rgba(65, 130, 242, 0.52);\n --color-secondary-600: rgba(65, 130, 242, 0.75);\n --color-secondary-700: #4182f2;\n --color-secondary-800: #356bc8;\n --color-secondary-900: #244a8a;\n\n --color-primary-opaque-300: #e6effd;\n --color-primary-opaque-400: #cedffc;\n\n --color-secondary-opaque-300: #e6effd;\n --color-secondary-opaque-400: #cedffc;\n\n --color-primary-100: rgba(65, 130, 242, 0.04);\n --color-primary-opaque-200: #f2f6fe;\n }\n\n .neon {\n --color-primary: #67ffc8;\n --color-secondary: #67ffc8;\n\n --color-theme-100: #000000;\n --color-theme-200: #292b34;\n --color-theme-300: #23252d;\n --color-theme-400: #17171a;\n --color-theme-500: #6D6D73;\n --color-theme-600: #89898e;\n --color-theme-700: #b0b0b5;\n --color-theme-800: #dfdfe5;\n --color-theme-900: #ffffff;\n\n --color-primary-200: rgba(103, 255, 200, 0.05);\n --color-primary-300: rgba(103, 255, 200, 0.1);\n --color-primary-400: rgba(103, 255, 200, 0.25);\n --color-primary-500: rgba(103, 255, 200, 0.5);\n --color-primary-600: rgba(103, 255, 200, 0.75);\n --color-primary-700: #67ffc8;\n --color-primary-800: #a5ffdf;\n --color-primary-900: #d0fdec;\n\n --color-secondary-200: rgba(103, 255, 200, 0.05);\n --color-secondary-300: rgba(103, 255, 200, 0.1);\n --color-secondary-400: rgba(103, 255, 200, 0.25);\n --color-secondary-500: rgba(103, 255, 200, 0.5);\n --color-secondary-600: rgba(103, 255, 200, 0.75);\n --color-secondary-700: #67ffc8;\n --color-secondary-800: #a5ffdf;\n --color-secondary-900: #d0fdec;\n\n --color-theme-transparent-200: rgba(6,7,8,0.12);\n --color-theme-transparent-300: rgba(6,7,8,0.22);\n --color-theme-transparent-400: rgba(6,7,8,0.5);\n --color-theme-transparent-500: rgba(255,255,255,0.27);\n --color-theme-transparent-600: rgba(255,255,255,0.4);\n --color-theme-transparent-700: rgba(255,255,255,0.6);\n --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n --color-primary-opaque-300: #334447;\n --color-primary-opaque-400: #3c605a;\n\n --color-secondary-opaque-300: #334447;\n --color-secondary-opaque-400: #3c605a;\n\n --body-bg-main: rgb(36, 38, 46);\n --body-bg-main-transparent: rgba(36, 38, 46, 0);\n --page-paper-main: #2f323a;\n --border-primary: #17171a;\n --selectable: #17171a;\n --selectable-active: #3b82f6;\n\n --note-bg: #3d3c3c;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(\n 47,\n 50,\n 58,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(36, 38, 46, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #24262e;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --color-primary-100: rgba(103, 255, 200, 0.08);\n --color-primary-opaque-200: #31403b;\n --muted-text: #cfcfd0;\n --alert-surface: rgba(243, 24, 72, 0.25);\n --muted-surface: #b4b4b8;\n --muted-surface-text: #4a4a4a;\n --stripe-pattern: #524145;\n --drop-overlay-bg: rgba(47, 50, 58, 0.93);\n }\n\n .dracula {\n --color-primary: #bd93f9;\n --color-secondary: #ff79c6;\n\n --color-theme-100: #000000;\n --color-theme-200: #292a39;\n --color-theme-300: #1f212b;\n --color-theme-400: #111217;\n --color-theme-500: #6272a4;\n --color-theme-600: #7d8ab8;\n --color-theme-700: #a4aecd;\n --color-theme-800: #dededa;\n --color-theme-900: #f8f8f2;\n\n --color-primary-200: rgba(189, 147, 249, 0.05);\n --color-primary-300: rgba(189, 147, 249, 0.1);\n --color-primary-400: rgba(189, 147, 249, 0.25);\n --color-primary-500: rgba(189, 147, 249, 0.5);\n --color-primary-600: rgba(189, 147, 249, 0.75);\n --color-primary-700: #bd93f9;\n --color-primary-800: #d2b6fb;\n --color-primary-900: #e4d3fd;\n\n --color-secondary-200: rgba(255, 121, 198, 0.05);\n --color-secondary-300: rgba(255, 121, 198, 0.1);\n --color-secondary-400: rgba(255, 121, 198, 0.25);\n --color-secondary-500: rgba(255, 121, 198, 0.5);\n --color-secondary-600: rgba(255, 121, 198, 0.75);\n --color-secondary-700: #ff79c6;\n --color-secondary-800: #ffa3d7;\n --color-secondary-900: #ffc9e7;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #42385b;\n --color-primary-opaque-400: #534472;\n\n --color-secondary-opaque-300: #543448;\n --color-secondary-opaque-400: #6f435f;\n\n --body-bg-main: rgb(32, 34, 44);\n --body-bg-main-transparent: rgba(32, 34, 44, 0);\n --page-paper-main: #2c2f3c;\n --border-primary: #111217;\n --selectable: #111217;\n --selectable-active: #3b82f6;\n\n --note-bg: #323026;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(44, 47, 60, 0);\n\n --modal-background: rgba(32, 34, 44, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191a22;\n\n --color-primary-100: rgba(189, 147, 249, 0.08);\n --color-primary-opaque-200: #302c3e;\n --muted-text: #d0d0cb;\n --alert-surface: rgba(255, 85, 85, 0.25);\n --muted-surface: #a9aec4;\n --muted-surface-text: #282a36;\n --stripe-pattern: #503d47;\n --drop-overlay-bg: rgba(44, 47, 60, 0.93);\n }\n\n .one-dark {\n --color-primary: #61afef;\n --color-secondary: #c678dd;\n\n --color-theme-100: #000000;\n --color-theme-200: #272c35;\n --color-theme-300: #1e2127;\n --color-theme-400: #191c21;\n --color-theme-500: #5c6370;\n --color-theme-600: #767d8a;\n --color-theme-700: #9aa2b1;\n --color-theme-800: #cdd3de;\n --color-theme-900: #dcdfe4;\n\n --color-primary-200: rgba(97, 175, 239, 0.05);\n --color-primary-300: rgba(97, 175, 239, 0.1);\n --color-primary-400: rgba(97, 175, 239, 0.25);\n --color-primary-500: rgba(97, 175, 239, 0.5);\n --color-primary-600: rgba(97, 175, 239, 0.75);\n --color-primary-700: #61afef;\n --color-primary-800: #8ec6f4;\n --color-primary-900: #bcdcf9;\n\n --color-secondary-200: rgba(198, 120, 221, 0.05);\n --color-secondary-300: rgba(198, 120, 221, 0.1);\n --color-secondary-400: rgba(198, 120, 221, 0.25);\n --color-secondary-500: rgba(198, 120, 221, 0.5);\n --color-secondary-600: rgba(198, 120, 221, 0.75);\n --color-secondary-700: #c678dd;\n --color-secondary-800: #d79ce8;\n --color-secondary-900: #e8c2f2;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #2d3e51;\n --color-primary-opaque-400: #364e65;\n\n --color-secondary-opaque-300: #402e47;\n --color-secondary-opaque-400: #543b5d;\n\n --body-bg-main: rgb(32, 35, 42);\n --body-bg-main-transparent: rgba(32, 35, 42, 0);\n --page-paper-main: #292d35;\n --border-primary: #191c21;\n --selectable: #191c21;\n --selectable-active: #3b82f6;\n\n --note-bg: #302e28;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(41, 45, 53, 0);\n\n --modal-background: rgba(32, 35, 42, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191c21;\n\n --color-primary-100: rgba(97, 175, 239, 0.08);\n --color-primary-opaque-200: #25313e;\n --muted-text: #c5cbd6;\n --alert-surface: rgba(224, 108, 117, 0.25);\n --muted-surface: #a3aab8;\n --muted-surface-text: #282c34;\n --stripe-pattern: #4b3e41;\n --drop-overlay-bg: rgba(41, 45, 53, 0.93);\n }\n\n html {\n color-scheme: light;\n\n &${DARK_THEME_MATCH} {\n color-scheme: dark;\n }\n }\n\n .ac-shadow,\n .ac-shadow--raised {\n &--lg {\n box-shadow: var(--shadow-primary);\n }\n &--sm {\n box-shadow: var(--shadow-tertiary);\n }\n }\n\n .ac-shadow--raised {\n &--lg {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-primary-hover);\n }\n }\n &--sm {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-tertiary-hover);\n }\n }\n }\n\n .ac-shadow-optimized--sm {\n position: relative;\n box-shadow: var(--shadow-tertiary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-tertiary);\n opacity: 0;\n border-radius: var(--ac-br-6);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-shadow-optimized--lg {\n position: relative;\n box-shadow: var(--shadow-primary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-primary);\n opacity: 0;\n border-radius: var(--ac-br-8);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-border-radius {\n &-4 {\n border-radius: var(--ac-br-4);\n }\n\n &-6 {\n border-radius: var(--ac-br-6);\n }\n\n &-8 {\n border-radius: var(--ac-br-8);\n }\n\n &-rounded {\n border-radius: var(--ac-br-rounded);\n }\n }\n\n\n // CSS Tooltip ::after content: data-tooltip\n\n .c-cooltip {\n position: relative;\n\n /*\n * Prefer scoped variables in this case.\n * This lines of CSS should be scoped too.\n */\n\n --cooltip-spacing: 0.5rem;\n --cooltip-padding: 0.25rem 0.625rem;\n --cooltip-max-width: 12.5rem;\n\n --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n --cooltip-transition-delay: 0.6s;\n --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n }\n\n .c-cooltip::after {\n /*\n * will-change is intended to be used as a last resort,\n * in order to try to deal with existing performance problems.\n * It should not be used to anticipate performance problems.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n *\n * will-change: transform, opacity\n */\n pointer-events: none;\n content: attr(data-tooltip);\n position: absolute;\n color: #fff;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.9);\n border-radius: 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.3;\n max-width: var(--cooltip-max-width);\n padding: var(--cooltip-padding);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .c-cooltip--top::after {\n bottom: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--right::after {\n left: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n .c-cooltip--bottom::after {\n top: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--left::after {\n right: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n /*\n * Make sure that disabled and aria pressed\n * items do not have tooltips available.\n */\n .c-cooltip:disabled::after,\n [aria-pressed=\"true\"]::after {\n display: none;\n }\n\n /*\n *\n * Only use hover when is available .\n * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n */\n @media (hover: hover) {\n /*\n * Here we maybe have a complex selector but actually it's not.\n * We simply asks here to show tooltip only on hover.\n * Focused elements (in this case, clicked elements) should hide the tooltip.\n */\n .c-cooltip--top:not(:focus):hover::after,\n .c-cooltip--bottom:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1) translateX(-50%);\n opacity: 1;\n }\n\n /*\n *\n * This is not code duplication!\n * Transform properties are tricky to animate and values\n * are not the same depending on the tooltip position.\n *\n * Animating only one transform, eg. scale(1) will\n * override all previously set transforms, eg. translateY.\n * So we need to always chain them.\n * eg. transform: scale(1) translateY(-50%) etc...\n */\n\n .c-cooltip--right:not(:focus):hover::after,\n .c-cooltip--left:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1);\n opacity: 1;\n }\n }\n\n .c-date-picker--calendar {\n width: 260px;\n padding: 16px 0px 8px 0px;\n margin: auto;\n background-color: var(--page-paper-main);\n }\n`;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,mBAAmB;AAErD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD,OAAO,MAAMC,WAAW,GAAGF,iBAAiB,u6gBA4frCC,gBAAgB,CAoOtB","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","names":["createGlobalStyle","DARK_THEME_MATCH","GlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nimport { DARK_THEME_MATCH } from \"../utils/themes\";\n\nexport const GlobalStyle = createGlobalStyle`\n :root {\n --color-primary: #5d2bff;\n --color-secondary: #5d2bff;\n\n --color-theme-100: #ffffff;\n --color-theme-200: #f6f6f9;\n --color-theme-300: #ebebee;\n --color-theme-400: #d7d7da;\n --color-theme-500: #b9b9bd;\n --color-theme-600: #89898e;\n --color-theme-700: #6d6d73;\n --color-theme-800: #5b5b61;\n --color-theme-900: #303037;\n\n --color-primary-200: rgba(93, 43, 255, 0.05);\n --color-primary-300: rgba(93, 43, 255, 0.1);\n --color-primary-400: rgba(93, 43, 255, 0.25);\n --color-primary-500: rgba(93, 43, 255, 0.5);\n --color-primary-600: rgba(93, 43, 255, 0.75);\n --color-primary-700: #5d2bff;\n --color-primary-800: #4a21cd;\n --color-primary-900: #32178b;\n\n --color-secondary-200: rgba(93, 43, 255, 0.05);\n --color-secondary-300: rgba(93, 43, 255, 0.1);\n --color-secondary-400: rgba(93, 43, 255, 0.25);\n --color-secondary-500: rgba(93, 43, 255, 0.5);\n --color-secondary-600: rgba(93, 43, 255, 0.75);\n --color-secondary-700: #5d2bff;\n --color-secondary-800: #4a21cd;\n --color-secondary-900: #32178b;\n\n --color-theme-transparent-200: rgba(36,36,76,0.04);\n --color-theme-transparent-300: rgba(48,48,55,0.1);\n --color-theme-transparent-400: rgba(48,48,55,0.2);\n --color-theme-transparent-500: rgba(48,48,55,0.34);\n --color-theme-transparent-600: rgba(48,48,55,0.57);\n --color-theme-transparent-700: rgba(48,48,55,0.7);\n --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n --color-primary-opaque-300: #efeaff;\n --color-primary-opaque-400: #d6caff;\n\n --color-secondary-opaque-300: #efeaff;\n --color-secondary-opaque-400: #d6caff;\n\n --color-sucess-green: #64cd93;\n --color-pale-green: #c3e799;\n --color-progress-blue: #4182f2;\n\n --color-yellow: #FDF196;\n --color-yellow-darker: #948D5D;\n --color-yellow-lighter: #EBD429;\n --color-orange: #FBBB75;\n --color-orange-darker: #916C43;\n --color-orange-lighter: #E99841;\n --color-beige: #EAC2AD;\n --color-beige-darker: #877064;\n --color-beige-lighter: #B98A72;\n --color-pink: #FBD6E7;\n --color-pink-darker: #917C86;\n --color-pink-lighter: #E4A1C0;\n --color-coral: #FF9C9C;\n --color-coral-darker: #945A5A;\n --color-coral-lighter: #DB4545;\n --color-purple-dirty: #C49CB6;\n --color-purple-dirty-darker: #715A69;\n --color-purple-dirty-lighter: #B16E9A;\n --color-purple: #BEACF9;\n --color-purple-darker: #6E6390;\n --color-purple-lighter: #9B86DF;\n --color-blue-aqua: #BDF7FD;\n --color-blue-aqua-darker: #6D8F92;\n --color-blue-aqua-lighter: #7BDDE7;\n --color-blue-pale: #BEEAFF;\n --color-blue-pale-darker: #6E8794;\n --color-blue-pale-lighter: #92BFD4;\n --color-blue-sky: #A0CBFD;\n --color-blue-sky-darker: #5C7592;\n --color-blue-sky-lighter: #568CCB;\n --color-turquoise: #B9E4E0;\n --color-turquoise-darker: #6B8482;\n --color-turquoise-lighter: #70BFB8;\n --color-green-pale: #C3E799;\n --color-green-pale-darker: #718658;\n --color-green-pale-lighter: #80C333;\n --color-green-olive-drab: #98B57C;\n --color-green-olive-drab-darker: #647157;\n --color-green-olive-drab-lighter: #819F65;\n --color-gray-silver: #DDDDDD;\n --color-gray-silver-darker: #808080;\n --color-gray-silver-lighter: #ACACAC;\n --color-gray: #CACACA;\n --color-gray-darker: #757575;\n --color-gray-lighter: #7D7D7D;\n\n --body-bg-main: rgb(244, 245, 247);\n --body-bg-main-transparent: rgba(244, 245, 247, 0);\n --page-paper-main: #ffffff;\n --border-primary: #d7d7da;\n --selectable: #d7d7da;\n --selectable-active: #3b82f6;\n\n --note-bg: #fff9f1;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n 0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n 0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n 0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n --page-paper-main-shadow: rgba(\n 255,\n 255,\n 255,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(244, 245, 247, 0.6);\n\n --highlight-dark: rgba(0, 0, 0, 0.03);\n\n --input-background-color: #ffffff;\n\n /* Consumed by app LESS under the dark-theme selector; every theme must define them so a dark\n theme never inherits another theme's chrome. */\n --color-primary-100: rgba(93, 43, 255, 0.03);\n --color-primary-opaque-200: #f7f4ff;\n --muted-text: #6d6d73;\n --alert-surface: rgba(243, 24, 72, 0.12);\n --muted-surface: #d7d7da;\n --muted-surface-text: #303037;\n --stripe-pattern: #e6e6e9;\n --drop-overlay-bg: rgba(255, 255, 255, 0.93);\n\n --ai-gradient: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n \n --ai-gradient-lighter: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n\n --red-alert: rgb(237, 97, 97);\n\n --warning: #ffcc6b;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --ac-br-4: 4px;\n\n --ac-br-6: 6px;\n\n --ac-br-8: 8px;\n\n --ac-br-rounded: 999px;\n }\n\n .cupcake {\n --color-primary: #29bcdd;\n --color-secondary: #fe6fa7;\n\n --color-primary-200: rgba(41, 188, 221, 0.07);\n --color-primary-300: rgba(41, 188, 221, 0.12);\n --color-primary-400: rgba(41, 188, 221, 0.26);\n --color-primary-500: rgba(41, 188, 221, 0.52);\n --color-primary-600: rgba(41, 188, 221, 0.75);\n --color-primary-700: #29bcdd;\n --color-primary-800: #219fbb;\n --color-primary-900: #1a768b;\n\n --color-secondary-200: rgba(254, 111, 167, 0.07);\n --color-secondary-300: rgba(254, 111, 167, 0.13);\n --color-secondary-400: rgba(254, 111, 167, 0.27);\n --color-secondary-500: rgba(254, 111, 167, 0.52);\n --color-secondary-600: rgba(254, 111, 167, 0.75);\n --color-secondary-700: #fe6fa7;\n --color-secondary-800: #dd6091;\n --color-secondary-900: #ab496f;\n\n --color-primary-opaque-300: #e5f7fb;\n --color-primary-opaque-400: #c8eef6;\n\n --color-secondary-opaque-300: #ffecf4;\n --color-secondary-opaque-400: #ffd8e7;\n\n --color-primary-100: rgba(41, 188, 221, 0.04);\n --color-primary-opaque-200: #f0fafc;\n }\n\n .classic {\n --color-primary: #4182f2;\n --color-secondary: #4182f2;\n\n --color-primary-200: rgba(65, 130, 242, 0.07);\n --color-primary-300: rgba(65, 130, 242, 0.13);\n --color-primary-400: rgba(65, 130, 242, 0.26);\n --color-primary-500: rgba(65, 130, 242, 0.52);\n --color-primary-600: rgba(65, 130, 242, 0.75);\n --color-primary-700: #4182f2;\n --color-primary-800: #356bc8;\n --color-primary-900: #244a8a;\n\n --color-secondary-200: rgba(65, 130, 242, 0.07);\n --color-secondary-300: rgba(65, 130, 242, 0.13);\n --color-secondary-400: rgba(65, 130, 242, 0.26);\n --color-secondary-500: rgba(65, 130, 242, 0.52);\n --color-secondary-600: rgba(65, 130, 242, 0.75);\n --color-secondary-700: #4182f2;\n --color-secondary-800: #356bc8;\n --color-secondary-900: #244a8a;\n\n --color-primary-opaque-300: #e6effd;\n --color-primary-opaque-400: #cedffc;\n\n --color-secondary-opaque-300: #e6effd;\n --color-secondary-opaque-400: #cedffc;\n\n --color-primary-100: rgba(65, 130, 242, 0.04);\n --color-primary-opaque-200: #f2f6fe;\n }\n\n .neon {\n --color-primary: #67ffc8;\n --color-secondary: #67ffc8;\n\n --color-theme-100: #000000;\n --color-theme-200: #292b34;\n --color-theme-300: #202129;\n --color-theme-400: #17171a;\n --color-theme-500: #6D6D73;\n --color-theme-600: #89898e;\n --color-theme-700: #b0b0b5;\n --color-theme-800: #dfdfe5;\n --color-theme-900: #ffffff;\n\n --color-primary-200: rgba(103, 255, 200, 0.05);\n --color-primary-300: rgba(103, 255, 200, 0.1);\n --color-primary-400: rgba(103, 255, 200, 0.25);\n --color-primary-500: rgba(103, 255, 200, 0.5);\n --color-primary-600: rgba(103, 255, 200, 0.75);\n --color-primary-700: #67ffc8;\n --color-primary-800: #a5ffdf;\n --color-primary-900: #d0fdec;\n\n --color-secondary-200: rgba(103, 255, 200, 0.05);\n --color-secondary-300: rgba(103, 255, 200, 0.1);\n --color-secondary-400: rgba(103, 255, 200, 0.25);\n --color-secondary-500: rgba(103, 255, 200, 0.5);\n --color-secondary-600: rgba(103, 255, 200, 0.75);\n --color-secondary-700: #67ffc8;\n --color-secondary-800: #a5ffdf;\n --color-secondary-900: #d0fdec;\n\n --color-theme-transparent-200: rgba(6,7,8,0.12);\n --color-theme-transparent-300: rgba(6,7,8,0.22);\n --color-theme-transparent-400: rgba(6,7,8,0.5);\n --color-theme-transparent-500: rgba(255,255,255,0.27);\n --color-theme-transparent-600: rgba(255,255,255,0.4);\n --color-theme-transparent-700: rgba(255,255,255,0.6);\n --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n --color-primary-opaque-300: #334447;\n --color-primary-opaque-400: #3c605a;\n\n --color-secondary-opaque-300: #334447;\n --color-secondary-opaque-400: #3c605a;\n\n --body-bg-main: rgb(36, 38, 46);\n --body-bg-main-transparent: rgba(36, 38, 46, 0);\n --page-paper-main: #2f323a;\n --border-primary: #17171a;\n --selectable: #17171a;\n --selectable-active: #3b82f6;\n\n --note-bg: #3d3c3c;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(\n 47,\n 50,\n 58,\n 0\n ); /* Shadow list shadow for page paper main */\n\n --modal-background: rgba(36, 38, 46, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #24262e;\n\n --only-white: #ffffff;\n\n --only-black: #000000;\n\n --color-primary-100: rgba(103, 255, 200, 0.08);\n --color-primary-opaque-200: #31403b;\n --muted-text: #cfcfd0;\n --alert-surface: rgba(243, 24, 72, 0.25);\n --muted-surface: #b4b4b8;\n --muted-surface-text: #4a4a4a;\n --stripe-pattern: #524145;\n --drop-overlay-bg: rgba(47, 50, 58, 0.93);\n }\n\n .dracula {\n --color-primary: #bd93f9;\n --color-secondary: #ff79c6;\n\n --color-theme-100: #000000;\n --color-theme-200: #262735;\n --color-theme-300: #1c1e27;\n --color-theme-400: #111217;\n --color-theme-500: #6272a4;\n --color-theme-600: #7d8ab8;\n --color-theme-700: #a4aecd;\n --color-theme-800: #dededa;\n --color-theme-900: #f8f8f2;\n\n --color-primary-200: rgba(189, 147, 249, 0.05);\n --color-primary-300: rgba(189, 147, 249, 0.1);\n --color-primary-400: rgba(189, 147, 249, 0.25);\n --color-primary-500: rgba(189, 147, 249, 0.5);\n --color-primary-600: rgba(189, 147, 249, 0.75);\n --color-primary-700: #bd93f9;\n --color-primary-800: #d2b6fb;\n --color-primary-900: #e4d3fd;\n\n --color-secondary-200: rgba(255, 121, 198, 0.05);\n --color-secondary-300: rgba(255, 121, 198, 0.1);\n --color-secondary-400: rgba(255, 121, 198, 0.25);\n --color-secondary-500: rgba(255, 121, 198, 0.5);\n --color-secondary-600: rgba(255, 121, 198, 0.75);\n --color-secondary-700: #ff79c6;\n --color-secondary-800: #ffa3d7;\n --color-secondary-900: #ffc9e7;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #42385b;\n --color-primary-opaque-400: #534472;\n\n --color-secondary-opaque-300: #543448;\n --color-secondary-opaque-400: #6f435f;\n\n --body-bg-main: rgb(32, 34, 44);\n --body-bg-main-transparent: rgba(32, 34, 44, 0);\n --page-paper-main: #2c2f3c;\n --border-primary: #111217;\n --selectable: #111217;\n --selectable-active: #3b82f6;\n\n --note-bg: #323026;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(44, 47, 60, 0);\n\n --modal-background: rgba(32, 34, 44, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191a22;\n\n --color-primary-100: rgba(189, 147, 249, 0.08);\n --color-primary-opaque-200: #302c3e;\n --muted-text: #d0d0cb;\n --alert-surface: rgba(255, 85, 85, 0.25);\n --muted-surface: #a9aec4;\n --muted-surface-text: #282a36;\n --stripe-pattern: #503d47;\n --drop-overlay-bg: rgba(44, 47, 60, 0.93);\n }\n\n .one-dark {\n --color-primary: #61afef;\n --color-secondary: #c678dd;\n\n --color-theme-100: #000000;\n --color-theme-200: #22262e;\n --color-theme-300: #1c1f24;\n --color-theme-400: #191c21;\n --color-theme-500: #5c6370;\n --color-theme-600: #767d8a;\n --color-theme-700: #9aa2b1;\n --color-theme-800: #cdd3de;\n --color-theme-900: #dcdfe4;\n\n --color-primary-200: rgba(97, 175, 239, 0.05);\n --color-primary-300: rgba(97, 175, 239, 0.1);\n --color-primary-400: rgba(97, 175, 239, 0.25);\n --color-primary-500: rgba(97, 175, 239, 0.5);\n --color-primary-600: rgba(97, 175, 239, 0.75);\n --color-primary-700: #61afef;\n --color-primary-800: #8ec6f4;\n --color-primary-900: #bcdcf9;\n\n --color-secondary-200: rgba(198, 120, 221, 0.05);\n --color-secondary-300: rgba(198, 120, 221, 0.1);\n --color-secondary-400: rgba(198, 120, 221, 0.25);\n --color-secondary-500: rgba(198, 120, 221, 0.5);\n --color-secondary-600: rgba(198, 120, 221, 0.75);\n --color-secondary-700: #c678dd;\n --color-secondary-800: #d79ce8;\n --color-secondary-900: #e8c2f2;\n\n --color-theme-transparent-200: rgba(6, 7, 8, 0.12);\n --color-theme-transparent-300: rgba(6, 7, 8, 0.22);\n --color-theme-transparent-400: rgba(6, 7, 8, 0.5);\n --color-theme-transparent-500: rgba(255, 255, 255, 0.27);\n --color-theme-transparent-600: rgba(255, 255, 255, 0.4);\n --color-theme-transparent-700: rgba(255, 255, 255, 0.6);\n --color-theme-transparent-800: rgba(255, 255, 255, 0.85);\n\n --color-primary-opaque-300: #2d3e51;\n --color-primary-opaque-400: #364e65;\n\n --color-secondary-opaque-300: #402e47;\n --color-secondary-opaque-400: #543b5d;\n\n --body-bg-main: rgb(32, 35, 42);\n --body-bg-main-transparent: rgba(32, 35, 42, 0);\n --page-paper-main: #292d35;\n --border-primary: #191c21;\n --selectable: #191c21;\n --selectable-active: #3b82f6;\n\n --note-bg: #302e28;\n\n --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n 0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n 0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n 0 10px 15px -3px rgba(0, 0, 0, 0.15);\n --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n 0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n --page-paper-main-shadow: rgba(41, 45, 53, 0);\n\n --modal-background: rgba(32, 35, 42, 0.7);\n\n --highlight-dark: rgba(0, 0, 0, 0.06);\n\n --input-background-color: #191c21;\n\n --color-primary-100: rgba(97, 175, 239, 0.08);\n --color-primary-opaque-200: #25313e;\n --muted-text: #c5cbd6;\n --alert-surface: rgba(224, 108, 117, 0.25);\n --muted-surface: #a3aab8;\n --muted-surface-text: #282c34;\n --stripe-pattern: #4b3e41;\n --drop-overlay-bg: rgba(41, 45, 53, 0.93);\n }\n\n html {\n color-scheme: light;\n\n &${DARK_THEME_MATCH} {\n color-scheme: dark;\n }\n }\n\n .ac-shadow,\n .ac-shadow--raised {\n &--lg {\n box-shadow: var(--shadow-primary);\n }\n &--sm {\n box-shadow: var(--shadow-tertiary);\n }\n }\n\n .ac-shadow--raised {\n &--lg {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-primary-hover);\n }\n }\n &--sm {\n transition: box-shadow 0.3s;\n &:hover {\n box-shadow: var(--shadow-tertiary-hover);\n }\n }\n }\n\n .ac-shadow-optimized--sm {\n position: relative;\n box-shadow: var(--shadow-tertiary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-tertiary);\n opacity: 0;\n border-radius: var(--ac-br-6);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-shadow-optimized--lg {\n position: relative;\n box-shadow: var(--shadow-primary);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: \"\";\n box-shadow: var(--shadow-primary);\n opacity: 0;\n border-radius: var(--ac-br-8);\n transition: opacity 0.3s ease;\n z-index: -1;\n }\n\n @media (hover: hover) {\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n .ac-border-radius {\n &-4 {\n border-radius: var(--ac-br-4);\n }\n\n &-6 {\n border-radius: var(--ac-br-6);\n }\n\n &-8 {\n border-radius: var(--ac-br-8);\n }\n\n &-rounded {\n border-radius: var(--ac-br-rounded);\n }\n }\n\n\n // CSS Tooltip ::after content: data-tooltip\n\n .c-cooltip {\n position: relative;\n\n /*\n * Prefer scoped variables in this case.\n * This lines of CSS should be scoped too.\n */\n\n --cooltip-spacing: 0.5rem;\n --cooltip-padding: 0.25rem 0.625rem;\n --cooltip-max-width: 12.5rem;\n\n --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n --cooltip-transition-delay: 0.6s;\n --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n }\n\n .c-cooltip::after {\n /*\n * will-change is intended to be used as a last resort,\n * in order to try to deal with existing performance problems.\n * It should not be used to anticipate performance problems.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n *\n * will-change: transform, opacity\n */\n pointer-events: none;\n content: attr(data-tooltip);\n position: absolute;\n color: #fff;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.9);\n border-radius: 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.3;\n max-width: var(--cooltip-max-width);\n padding: var(--cooltip-padding);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .c-cooltip--top::after {\n bottom: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--right::after {\n left: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n .c-cooltip--bottom::after {\n top: calc(100% + var(--cooltip-spacing));\n left: 50%;\n transform: scale(0.85) translateX(-50%);\n transform-origin: 0;\n }\n\n .c-cooltip--left::after {\n right: calc(100% + var(--cooltip-spacing));\n transform: scale(0.85);\n }\n\n /*\n * Make sure that disabled and aria pressed\n * items do not have tooltips available.\n */\n .c-cooltip:disabled::after,\n [aria-pressed=\"true\"]::after {\n display: none;\n }\n\n /*\n *\n * Only use hover when is available .\n * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n */\n @media (hover: hover) {\n /*\n * Here we maybe have a complex selector but actually it's not.\n * We simply asks here to show tooltip only on hover.\n * Focused elements (in this case, clicked elements) should hide the tooltip.\n */\n .c-cooltip--top:not(:focus):hover::after,\n .c-cooltip--bottom:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1) translateX(-50%);\n opacity: 1;\n }\n\n /*\n *\n * This is not code duplication!\n * Transform properties are tricky to animate and values\n * are not the same depending on the tooltip position.\n *\n * Animating only one transform, eg. scale(1) will\n * override all previously set transforms, eg. translateY.\n * So we need to always chain them.\n * eg. transform: scale(1) translateY(-50%) etc...\n */\n\n .c-cooltip--right:not(:focus):hover::after,\n .c-cooltip--left:not(:focus):hover::after {\n transition-property: opacity, transform;\n transition-duration: var(--cooltip-transition-duration);\n transition-delay: var(--cooltip-transition-delay);\n transition-timing-function: var(--cooltip-timing);\n transform: scale(1);\n opacity: 1;\n }\n }\n\n .c-date-picker--calendar {\n width: 260px;\n padding: 16px 0px 8px 0px;\n margin: auto;\n background-color: var(--page-paper-main);\n }\n`;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,mBAAmB;AAErD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD,OAAO,MAAMC,WAAW,GAAGF,iBAAiB,u6gBA4frCC,gBAAgB,CAoOtB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAW9E,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAID,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAW9E,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAID,eAAO,MAAM,MAAM,kMA2ElB,CAAC"}
|
|
@@ -34,6 +34,7 @@ export const Window = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
34
34
|
const handleKeyDown = useCallback(event => {
|
|
35
35
|
if (!event.defaultPrevented && (event.key === "Esc" || event.key === "Escape") && !disableCloseOnEsc) {
|
|
36
36
|
event.preventDefault();
|
|
37
|
+
event.stopPropagation();
|
|
37
38
|
if (onClose) {
|
|
38
39
|
onClose();
|
|
39
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Window.js","names":["React","useCallback","useRef","forwardRef","FocusLock","RemoveScroll","classnames","StyledWindow","Portal","useLayerContext","layers","useForkRef","returnFocus","preventScroll","Window","_ref","ref","children","onClose","className","style","onKeyDown","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableCloseOnEs","disableCloseOnEsc","onClick","rest","_objectWithoutPropertiesLoose","_excluded","innerRef","handleRef","_useLayerContext","_useLayerContext$zInd","zIndex","skyscraper","handleKeyDown","event","defaultPrevented","key","preventDefault","
|
|
1
|
+
{"version":3,"file":"Window.js","names":["React","useCallback","useRef","forwardRef","FocusLock","RemoveScroll","classnames","StyledWindow","Portal","useLayerContext","layers","useForkRef","returnFocus","preventScroll","Window","_ref","ref","children","onClose","className","style","onKeyDown","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableCloseOnEs","disableCloseOnEsc","onClick","rest","_objectWithoutPropertiesLoose","_excluded","innerRef","handleRef","_useLayerContext","_useLayerContext$zInd","zIndex","skyscraper","handleKeyDown","event","defaultPrevented","key","preventDefault","stopPropagation","handleClick","createElement","disabled","forwardProps","enabled","noIsolation","_extends","tabIndex","displayName"],"sources":["../../../../src/components/Window/Window.tsx"],"sourcesContent":["import React, { useCallback, useRef, forwardRef, KeyboardEvent } from \"react\";\nimport FocusLock from \"react-focus-lock\";\nimport { RemoveScroll } from \"react-remove-scroll\";\n\nimport classnames from \"classnames\";\n\nimport { StyledWindow } from \"./Style\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { layers } from \"../../utils\";\nimport useForkRef from \"../../utils/useForkRef\";\n\nexport interface IWindow {\n onClose?: () => void;\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableCloseOnEsc?: boolean;\n}\n\nconst returnFocus = { preventScroll: true };\n\nexport const Window = forwardRef<\n HTMLDivElement,\n IWindow & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IWindow>\n>(\n (\n {\n children,\n onClose,\n className,\n style,\n onKeyDown,\n disableFocusLock = false,\n disableScrollLock = false,\n disableCloseOnEsc = false,\n onClick,\n ...rest\n },\n ref\n ) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n const { zIndex = layers.skyscraper } = useLayerContext();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (\n !event.defaultPrevented &&\n (event.key === \"Esc\" || event.key === \"Escape\") &&\n !disableCloseOnEsc\n ) {\n event.preventDefault();\n event.stopPropagation();\n if (onClose) {\n onClose();\n }\n }\n if (typeof onKeyDown === \"function\") {\n onKeyDown(event);\n }\n },\n [disableCloseOnEsc, onClose, onKeyDown]\n );\n\n const handleClick = useCallback(\n (event) => {\n event?.stopPropagation();\n typeof onClick === \"function\" && onClick(event);\n },\n [onClick]\n );\n\n return (\n <Portal>\n <FocusLock returnFocus={returnFocus} disabled={disableFocusLock}>\n <RemoveScroll\n forwardProps\n ref={handleRef}\n enabled={!disableScrollLock}\n noIsolation\n >\n <StyledWindow\n {...rest}\n style={{ zIndex, ...style }}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n className={classnames(\"c-window\", className)}\n onClick={handleClick}\n >\n {children}\n </StyledWindow>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n );\n }\n);\n\nWindow.displayName = \"Window\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,EAAEC,UAAU,QAAuB,OAAO;AAC7E,OAAOC,SAAS,MAAM,kBAAkB;AACxC,SAASC,YAAY,QAAQ,qBAAqB;AAElD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,YAAY,QAAQ,SAAS;AACtC,SAASC,MAAM,EAAEC,eAAe,QAAQ,eAAe;AACvD,SAASC,MAAM,QAAQ,aAAa;AACpC,OAAOC,UAAU,MAAM,wBAAwB;AAS/C,MAAMC,WAAW,GAAG;EAAEC,aAAa,EAAE;AAAK,CAAC;AAE3C,OAAO,MAAMC,MAAM,gBAAGX,UAAU,CAI9B,CAAAY,IAAA,EAaEC,GAAG,KACA;EAAA,IAZDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAAC,qBAAA,GAAAP,IAAA,CACTQ,gBAAgB;IAAhBA,gBAAgB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAT,IAAA,CACxBU,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAX,IAAA,CACzBY,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACzBE,OAAO,GAAAb,IAAA,CAAPa,OAAO;IACJC,IAAI,GAAAC,6BAAA,CAAAf,IAAA,EAAAgB,SAAA;EAIT,MAAMC,QAAQ,GAAG9B,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAM+B,SAAS,GAAGtB,UAAU,CAACqB,QAAQ,EAAEhB,GAAG,CAAC;EAC3C,MAAAkB,gBAAA,GAAuCzB,eAAe,CAAC,CAAC;IAAA0B,qBAAA,GAAAD,gBAAA,CAAhDE,MAAM;IAANA,MAAM,GAAAD,qBAAA,cAAGzB,MAAM,CAAC2B,UAAU,GAAAF,qBAAA;EAElC,MAAMG,aAAa,GAAGrC,WAAW,CAC9BsC,KAAoC,IAAK;IACxC,IACE,CAACA,KAAK,CAACC,gBAAgB,KACtBD,KAAK,CAACE,GAAG,KAAK,KAAK,IAAIF,KAAK,CAACE,GAAG,KAAK,QAAQ,CAAC,IAC/C,CAACd,iBAAiB,EAClB;MACAY,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBH,KAAK,CAACI,eAAe,CAAC,CAAC;MACvB,IAAIzB,OAAO,EAAE;QACXA,OAAO,CAAC,CAAC;MACX;IACF;IACA,IAAI,OAAOG,SAAS,KAAK,UAAU,EAAE;MACnCA,SAAS,CAACkB,KAAK,CAAC;IAClB;EACF,CAAC,EACD,CAACZ,iBAAiB,EAAET,OAAO,EAAEG,SAAS,CACxC,CAAC;EAED,MAAMuB,WAAW,GAAG3C,WAAW,CAC5BsC,KAAK,IAAK;IACTA,KAAK,YAALA,KAAK,CAAEI,eAAe,CAAC,CAAC;IACxB,OAAOf,OAAO,KAAK,UAAU,IAAIA,OAAO,CAACW,KAAK,CAAC;EACjD,CAAC,EACD,CAACX,OAAO,CACV,CAAC;EAED,oBACE5B,KAAA,CAAA6C,aAAA,CAACrC,MAAM,qBACLR,KAAA,CAAA6C,aAAA,CAACzC,SAAS;IAACQ,WAAW,EAAEA,WAAY;IAACkC,QAAQ,EAAEvB;EAAiB,gBAC9DvB,KAAA,CAAA6C,aAAA,CAACxC,YAAY;IACX0C,YAAY;IACZ/B,GAAG,EAAEiB,SAAU;IACfe,OAAO,EAAE,CAACvB,iBAAkB;IAC5BwB,WAAW;EAAA,gBAEXjD,KAAA,CAAA6C,aAAA,CAACtC,YAAY,EAAA2C,QAAA,KACPrB,IAAI;IACRT,KAAK,EAAA8B,QAAA;MAAId;IAAM,GAAKhB,KAAK,CAAG;IAC5BC,SAAS,EAAEiB,aAAc;IACzBa,QAAQ,EAAE,CAAE;IACZhC,SAAS,EAAEb,UAAU,CAAC,UAAU,EAAEa,SAAS,CAAE;IAC7CS,OAAO,EAAEgB;EAAY,IAEpB3B,QACW,CACF,CACL,CACL,CAAC;AAEb,CACF,CAAC;AAEDH,MAAM,CAACsC,WAAW,GAAG,QAAQ","ignoreList":[]}
|