globuswebcomponents 0.4.8 → 0.5.0

package/dist/globuscomponents/globuscomponents.css

@@ -1,1610 +1,3 @@
-:root {
-    /* --------------------------------------Primary Colors--------------------------------------------- */
-    /* base color palette */
-    --base-white: #fff;
-    --base-black: #000;
-
-
-    /* gray color palette  */
-    --gray-25: #fcfcfd;
-    --gray-50: #f6f8fa;
-    --gray-100: #eef2f6;
-    --gray-200: #e3e8ef;
-    --gray-300: #cdd5df;
-    --gray-400: #9aa4b2;
-    --gray-500: #697586;
-    --gray-600: #4b5565;
-    --gray-700: #364152;
-    --gray-800: #202939;
-    --gray-900: #121926;
-    --gray-950: #0D121C;
-
-    /* brand dark blue color palette */
-    --brandDarkBlue-25: #F9F9FB;
-    --brandDarkBlue-50: #edeef3;
-    --brandDarkBlue-100: #d3d5e0;
-    --brandDarkBlue-200: #b5b9cc;
-    --brandDarkBlue-300: #9095b2;
-    --brandDarkBlue-400: #464f7f;
-    --brandDarkBlue-500: #212c65;
-    --brandDarkBlue-600: #1e285c;
-    --brandDarkBlue-700: #1c2554;
-    --brandDarkBlue-800: #161d43;
-    --brandDarkBlue-900: #0b0f22;
-    --brandDarkBlue-950: #070914;
-
-    /* brand red color palette */
-    --brandRed-25: #fffbfa;
-    --brandRed-50: #fef1f2;
-    --brandRed-100: #fde3e5;
-    --brandRed-200: #f9b4ba;
-    --brandRed-300: #f68e98;
-    --brandRed-400: #f36976;
-    --brandRed-500: #e21b2e;
-    --brandRed-600: #cc1a2a;
-    --brandRed-700: #b51726;
-    --brandRed-800: #8c121d;
-    --brandRed-900: #680d16;
-    --brandRed-950: #3f080d;
-
-    /* warning color palette */
-    --warning-25: #fffcf5;
-    --warning-50: #fffaeb;
-    --warning-100: #fef0c7;
-    --warning-200: #fedf89;
-    --warning-300: #fec84b;
-    --warning-400: #fdb022;
-    --warning-500: #f79009;
-    --warning-600: #dc6803;
-    --warning-700: #b54708;
-    --warning-800: #93370d;
-    --warning-900: #7A2e0e;
-    --warning-950: #4e1d09;
-
-    /* success color palette  */
-    --success-25: #f6fef9;
-    --success-50: #ecfdf3;
-    --success-100: #dcfaeb;
-    --success-200: #a9efc5;
-    --success-300: #75e0a7;
-    --success-400: #47cd89;
-    --success-500: #17b26a;
-    --success-600: #079455;
-    --success-700: #067647;
-    --success-800: #085d3a;
-    --success-900: #074d31;
-    --success-950: #053321;
-
-    /* ------------------------------------------opacity color palette--------------------------------------  */
-    /* 20% opacity */
-    --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
-    --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
-
-    /* 30% opacity */
-    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
-    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
-
-    /* 40% opacity */
-    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
-    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
-
-
-    /* ------------------------------------------Secondary Color------------------------------------------- */
-    /* blueLight color palete */
-    --lightBlue-25: #F5FBFF;
-    --lightBlue-50: #F0F9FF;
-    --lightBlue-100: #E0F2FE;
-    --lightBlue-200: #B9E6FE;
-    --lightBlue-300: #7CD4FD;
-    --lightBlue-400: #7CD4FD;
-    --lightBlue-500: #0BA5EC;
-    --lightBlue-600: #0086C9;
-    --lightBlue-700: #026AA2;
-    --lightBlue-800: #065986;
-    --lightBlue-900: #0B4A6F;
-    --lightBlue-950: #062C41;
-   
-
-    /* blue color palette */
-    --blue-25: #ECF5FE;
-    --blue-50: #E4F0FC;
-    --blue-100: #C8E0F9;
-    --blue-200: #9AC7F4;
-    --blue-300: #6AA9E7;
-    --blue-400: #378FE6;
-    --blue-500: #075DB2;
-    --blue-600: #064E94;
-    --blue-700: #053E77;
-    --blue-800: #042F59;
-    --blue-900: #022445;
-    --blue-950: #021D37;
-
-    /* Purple color palete */
-    --purple-25: #FAFAFF;
-    --purple-50: #F4F3FF;
-    --purple-100: #EBE9FE;
-    --purple-200: #D9D6FE;
-    --purple-300: #BDB4FE;
-    --purple-400: #9B8AFB;
-    --purple-500: #7A5AF8;
-    --purple-600: #6938EF;
-    --purple-700: #5925DC;
-    --purple-800: #4A1FB8;
-    --purple-900: #3E1C96;
-    --purple-950: #27115F;
-
-
-    /* pink color palette */
-    --pink-25: #FEF6FB;
-    --pink-50: #FDF2FA;
-    --pink-100: #FCE7F6;
-    --pink-200: #FCCEEE;
-    --pink-300: #FAA7E0;
-    --pink-400: #F670C7;
-    --pink-500: #EE46BC;
-    --pink-600: #DD2590;
-    --pink-700: #C11574;
-    --pink-800: #9E165F;
-    --pink-900: #851651;
-    --pink-950: #4E0D30;
-
-
-
-    /* -------------------------------------------------Token---------------------------------------------- */
-
-    /* -----------Text Color----------- */
-
-    [data-theme="light"] {
-        --color-text-bold: var(--gray-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-bold: var(--gray-100);
-    }
-
-    [data-theme="light"] {
-        --color-text: var(--gray-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text: var(--gray-400);
-    }
-
-    [data-theme="light"] {
-        --color-text-subtle: var(--gray-500);
-    }
-
-    [data-theme="light"] {
-        --color-text-subtle: var(--gray-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-disabled: var(--gray-300);
-    }
-
-    [data-theme="dark"] {
-        --color-text-disabled: var(--gray-700);
-    }
-
-    [data-theme="light"] {
-        --color-text-inverse: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-text-inverse: var(--base-black);
-    }
-
-    [data-theme="light"] {
-        --color-text-brandDarkBlue: var(--brandDarkBlue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-brandDarkBlue: var(--brandDarkBlue-200);
-    }
-
-    [data-theme="light"] {
-        --color-text-brandRed: var(--brandRed-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-brandRed: var(--brandRed-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-selected: var(--blue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-selected: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-danger-bold: var(--brandRed-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-danger-bold: var(--brandRed-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-danger: var(--brandRed-700);
-    }
-
-    [data-theme="dark"] {
-        --color-text-danger: var(--brandRed-700);
-    }
-
-     [data-theme="light"] {
-        --color-text-danger-subtle: var(--brandRed-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text-danger-subtle: var(--brandRed-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-danger-inverse: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-text-danger-inverse: var(--brandRed-950);
-    }
-
-    [data-theme="light"] {
-        --color-text-warning-bold: var(--warning-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-warning-bold: var(--warning-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-warning: var(--warning-600);
-    }
-
-
-    [data-theme="dark"] {
-        --color-text-warning: var(--warning-300);
-    }
-
-
-    [data-theme="light"] {
-        --color-text-warning-subtle: var(--warning-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-warning-subtle: var(--warning-400);
-    }
-
-    [data-theme="light"] {
-        --color-text-success-bold: var(--success-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-success-bold: var(--success-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-success: var(--success-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text-success: var(--success-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-success-subtle: var(--success-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text-success-subtle: var(--success-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-discovery-bold: var(--blueLight-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-discovery-bold: var(--blueLight-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-discovery: var(--blueLight-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-discovery: var(--blueLight-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-discovery-subtle: var(--blueLight-400);
-    }
-
-    [data-theme="dark"] {
-        --color-text-discovery-subtle: var(--blueLight-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-information-bold: var(--blue-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-information-bold: var(--blue-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-information: var(--blue-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text-information: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-information-subtle: var(--blue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-information-subtle: var(--blue-400);
-    }
-
-    [data-theme="light"] {
-        --color-text-purple-bold: var(--purple-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-purple-bold: var(--purple-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-purple: var(--purple-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text-purple: var(--purple-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-purple-subtle: var(--purple-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-purple-subtle: var(--purple-400);
-    }
-
-    [data-theme="light"] {
-        --color-text-pink-bold: var(--pink-800);
-    }
-
-    [data-theme="dark"] {
-        --color-text-pink-bold: var(--pink-100);
-    }
-
-    [data-theme="light"] {
-        --color-text-pink: var(--pink-600);
-    }
-
-    [data-theme="dark"] {
-        --color-text-pink: var(--pink-300);
-    }
-
-    [data-theme="light"] {
-        --color-text-pink-subtle: var(--pink-500);
-    }
-
-    [data-theme="dark"] {
-        --color-text-pink-subtle: var(--pink-400);
-    }
-
-
-    /* --------------Link color--------------- */
-
-
-    [data-theme="light"] {
-        --color-link: var(--blue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-link: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-link-pressed: var(--blue-600);
-    }
-
-    [data-theme="dark"] {
-        --color-link-pressed: var(--blue-600);
-    }
-
-    [data-theme="light"] {
-        --color-link-visited: var(--blueLight-600);
-    }
-
-    [data-theme="dark"] {
-        --color-link-visited: var(--blueLight-300);
-    }
-
-
-    /* --------------Icon color--------------- */
-
-    [data-theme="light"] {
-        --color-icon-bold: var(--gray-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-bold: var(--gray-100);
-    }
-    
-    [data-theme="light"] {
-        --color-icon: var(--gray-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon: var(--gray-400);
-    }
-
-    [data-theme="light"] {
-        --color-icon-subtle: var(--gray-500);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-subtle: var(--gray-500);
-    }
-
-    [data-theme="light"] {
-        --color-icon-disabled: var(--gray-300);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-disabled: var(--gray-700);
-    }
-
-    [data-theme="light"] {
-        --color-icon-inverse: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-inverse: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);
-    }
-
-    [data-theme="light"] {
-        --color-icon-brandRed: var(--brandRed-500);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-brandRed: var(--brandRed-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-selected: var(--blue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-selected: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-danger-bold: var(--brandRed-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-danger-bold: var(--brandRed-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-danger: var(--brandRed-700);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-danger: var(--brandRed-200);
-    }
-
-    [data-theme="light"] {
-        --color-icon-danger-inverse: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-danger-inverse: var(--brandRed-950);
-    }
-
-    [data-theme="light"] {
-        --color-icon-warning-bold: var(--warning-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-warning-bold: var(--warning-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-warning: var(--warning-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-warning: var(--warning-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-success-bold: var(--success-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-success-bold: var(--success-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-success: var(--success-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-success: var(--success-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-discovery-bold: var(--blueLight-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-discovery-bold: var(--blueLight-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-discovery: var(--blueLight-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-discovery: var(--blueLight-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-information-bold: var(--blue-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-information-bold: var(--blue-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-information: var(--blue-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-information: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-purple-bold: var(--purple-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-purple-bold: var(--purple-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-purple: var(--purple-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-purple: var(--purple-300);
-    }
-
-    [data-theme="light"] {
-        --color-icon-pink-bold: var(--pink-800);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-pink-bold: var(--pink-100);
-    }
-
-    [data-theme="light"] {
-        --color-icon-pink: var(--pink-600);
-    }
-
-    [data-theme="dark"] {
-        --color-icon-pink: var(--pink-300);
-    }
-
-    /* ----------------Border Color --------------- */
-
-    [data-theme="light"] {
-        --color-border-bold: var(--gray-500);
-    }
-
-    [data-theme="dark"] {
-        --color-border-bold: var(--gray-400);
-    }
-
-    [data-theme="light"] {
-        --color-border: var(--gray-400);
-    }
-
-    [data-theme="dark"] {
-        --color-border: var(--gray-500);
-    }
-
-    [data-theme="light"] {
-        --color-border-subtle: var(--gray-300);
-    }
-
-    [data-theme="dark"] {
-        --color-border-subtle: var(--gray-700);
-    }
-
-    [data-theme="light"] {
-        --color-border-subtler: var(--gray-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-subtler: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-disabled: var(--gray-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-disabled: var(--gray-700);
-    }
-
-    [data-theme="light"] {
-        --color-border-inverse: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-border-inverse: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-input: var(--gray-300);
-    }
-
-    [data-theme="dark"] {
-        --color-border-input: var(--gray-600);
-    }
-
-    [data-theme="light"] {
-        --color-border-focus: var(--gray-400);
-    }
-
-    [data-theme="dark"] {
-        --color-border-focus: var(--blue-200);
-    }
-
-    [data-theme="light"] {
-        --color-border-selected: var(--blue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-border-selected: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-brandDarkBlue: var(--brandDarkBlue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-border-brandDarkBlue: var(--brandDarkBlue-200);
-    }
-
-    [data-theme="light"] {
-        --color-border-brandRed: var(--brandRed-500);
-    }
-
-    [data-theme="dark"] {
-        --color-border-brandRed: var(--brandRed-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-danger-bold: var(--brandRed-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-danger-bold: var(--brandRed-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-danger: var(--brandRed-700);
-    }
-
-    [data-theme="dark"] {
-        --color-border-danger: var(--brandRed-200);
-    }
-
-    [data-theme="light"] {
-        --color-border-danger-subtle: var(--brandRed-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-danger-subtle: var(--brandRed-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-danger-subtler: var(--brandRed-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-danger-subtler: var(--brandRed-900);
-    }
-
-    [data-theme="light"] {
-        --color-border-warning-bold: var(--warning-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-warning-bold: var(--warning-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-warning: var(--warning-600);
-    }
-
-    [data-theme="dark"] {
-        --color-border-warning: var(--warning-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-warning-subtle: var(--warning-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-warning-subtle: var(--warning-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-warning-subtler: var(--warning-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-warning-subtler: var(--warning-900);
-    }
-
-    [data-theme="light"] {
-        --color-border-success-bold: var(--success-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-success-bold: var(--success-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-success: var(--success-600);
-    }
-
-    [data-theme="dark"] {
-        --color-border-success: var(--success-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-success-subtle: var(--success-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-success-subtle: var(--success-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-success-subtler: var(--success-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-success-subtler: var(--success-900);
-    }
-
-    [data-theme="light"] {
-        --color-border-discovery-bold: var(--blueLight-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-discovery-bold: var(--blueLight-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-discovery: var(--blueLight-600);
-    }
-
-    [data-theme="dark"] {
-        --color-border-discovery: var(--blueLight-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-discovery-subtle: var(--blueLight-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-discovery-subtle: var(--blueLight-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-discovery-subtler: var(--blueLight-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-discovery-subtler: var(--blueLight-900);
-    }
-
-    [data-theme="light"] {
-        --color-border-information-bold: var(--blue-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-information-bold: var(--blue-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-information: var(--blue-600);
-    }
-
-    [data-theme="dark"] {
-        --color-border-information: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-information-subtle: var(--blue-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-information-subtle: var(--blue-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-information-subtler: var(--blue-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-information-subtler: var(--blue-900);
-    }
-
-    [data-theme="light"] {
-        --color-border-purple-bold: var(--purple-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-purple-bold: var(--purple-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-purple: var(--purple-600);
-    }
-
-    [data-theme="dark"] {
-        --color-border-purple: var(--purple-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-purple-subtle: var(--purple-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-purple-subtle: var(--purple-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-purple-subtler: var(--purple-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-purple-subtler: var(--purple-900);
-    }
-
-    [data-theme="light"] {
-        --color-border-pink-bold: var(--pink-800);
-    }
-
-    [data-theme="dark"] {
-        --color-border-pink-bold: var(--pink-100);
-    }
-
-    [data-theme="light"] {
-        --color-border-pink: var(--pink-600);
-    }
-
-    [data-theme="dark"] {
-        --color-border-pink: var(--pink-300);
-    }
-
-    [data-theme="light"] {
-        --color-border-pink-subtle: var(--pink-200);
-    }
-
-    [data-theme="dark"] {
-        --color-border-pink-subtle: var(--pink-800);
-    }
-
-    [data-theme="light"] {
-        --color-border-pink-subtler: var(--pink-100);
-    }
-
-    [data-theme="dark"] {
-        --color-border-pink-subtler: var(--pink-900);
-    }
-
-
-
-    /* Emmanuel Kadiri starts from background color */
-
-    /* ----------------Background Color --------------- */
-
-    [data-theme="light"] {
-        --color-background-card-bold: var(--gray-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-card-bold: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-card: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-background-card: var(--gray-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-input: var(--gray-400);
-    }
-
-    [data-theme="dark"] {
-        --color-background-input: var(--gray-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-disabled: var(--gray-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-disabled: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-selected: var(--blue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-background-selected: var(--blue-300);
-    }
-
-    [data-theme="light"] {
-        --color-background-brandDarkblue: var(--brandDarkBlue-500);
-    }
-
-    [data-theme="dark"] {
-        --color-background-brandDarkblue: var(--brandDarkBlue-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-brandRed: var(--brandRed-500);
-    }
-
-    [data-theme="dark"] {
-        --color-background-brandRed: var(--brandRed-300);
-    }
-
-    [data-theme="light"] {
-        --color-background-brandRed-hover: var(--brandRed-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-brandRed-hover: var(--brandRed-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-brandRed-pressed: var(--brandRed-700);
-    }
-
-    [data-theme="dark"] {
-        --color-background-brandRed-pressed: var(--brandRed-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-gray-bold: var(--gray-400);
-    }
-
-    [data-theme="dark"] {
-        --color-background-gray-bold: var(--gray-500);
-    }
-
-    [data-theme="light"] {
-        --color-background-gray: var(--gray-300);
-    }
-
-    [data-theme="dark"] {
-        --color-background-gray: var(--gray-600);
-    }
-
-    [data-theme="light"] {
-        --color-background-gray-subtle: var(--gray-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-gray-subtle: var(--gray-700);
-    }
-
-    [data-theme="light"] {
-        --color-background-gray-subtler: var(--gray-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-gray-subtler: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-gray-subtlest: var(--gray-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-gray-subtlest: var(--gray-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-danger-bold: var(--brandRed-800);
-    }
-
-    [data-theme="dark"] {
-        --color-background-danger-bold: var(--brandRed-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-danger: var(--brandRed-700);
-    }
-
-    [data-theme="dark"] {
-        --color-background-danger: var(--brandRed-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-danger-subtle: var(--brandRed-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-danger-subtle: var(--brandRed-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-danger-subtler: var(--brandRed-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-danger-subtler: var(--brandRed-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-danger-subtlest: var(--brandRed-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-danger-subtlest: var(--brandRed-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-warning-bold: var(--warning-800);
-    }
-
-    [data-theme="dark"] {
-        --color-background-warning-bold: var(--warning-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-warning: var(--warning-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-warning: var(--warning-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-warning-subtle: var(--warning-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-warning-subtle: var(--warning-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-warning-subtler: var(--warning-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-warning-subtler: var(--warning-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-warning-subtlest: var(--warning-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-warning-subtlest: var(--warning-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-success-bold: var(--success-800);
-    }
-
-    [data-theme="dark"] {
-        --color-background-success-bold: var(--success-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-success: var(--success-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-success: var(--success-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-success-subtle: var(--success-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-success-subtle: var(--success-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-success-subtler: var(--success-100); 
-    }
-
-    [data-theme="dark"] {
-        --color-background-success-subtler: var(--success-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-success-subtlest: var(--success-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-success-subtlest: var(--success-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-discovery-bold: var(--blueLight-800)
-    }
-
-    [data-theme="dark"] {
-        --color-background-discovery-bold: var(--blueLight-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-discovery: var(--blueLight-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-discovery: var(--blueLight-200);
-    }
-
-    [data-theme="light"]{
-        --color-background-discovery-subtle: var(--blueLight-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-discovery-subtle: var(--blueLight-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-discovery-subtler: var(--blueLight-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-discovery-subtler: var(--blueLight-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-discovery-subtlest: var(--blueLight-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-discovery-subtlest: var(--blueLight-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-information-bold: var(--blue-800);
-    }
-
-    [data-theme="dark"] {
-        --color-background-information-bold: var(--blue-100)
-    }
-
-    [data-theme="light"] {
-        --color-background-information: var(--blue-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-information: var(--blue-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-information-subtle: var(--blue-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-information-subtle: var(--blue-800);
-    }
-
-    [data-them="light"] {
-        --color-background-information-subtler: var(--blue-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-information-subtler: var(--blue-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-information-subtlest: var(--blue-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-information-subtlest: var(--blue-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-purple-bold: var(--purple-800);
-    }
-
-    [data-theme="dark"] {
-        --color-background-purple-bold: var(--blue-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-purple: var(--purple-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-purple: var(--blue-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-purple-subtle: var(--purple-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-purple-subtle: var(--purple-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-purple-subtler: var(--purple-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-purple-subtler: var(--purple-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-purple-subtlest: var(--purple-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-purple-subtlest: var(--purple-950);
-    }
-
-    [data-theme="light"] {
-        --color-background-pink-bold: var(--pink-800);
-    }
-
-    [data-theme="dark"] {
-        --color-background-pink-bold: var(--pink-100);
-    }
-
-    [data-theme="light"] {
-        --color-background-pink: var(--pink-600);
-    }
-
-    [data-theme="dark"] {
-        --color-background-pink: var(--pink-200);
-    }
-
-    [data-theme="light"] {
-        --color-background-pink-subtle: var(--pink-200);
-    }
-
-    [data-theme="dark"] {
-        --color-background-pink-subtle: var(--pink-800);
-    }
-
-    [data-theme="light"] {
-        --color-background-pink-subtler: var(--pink-100);
-    }
-
-    [data-theme="dark"] {
-        --color-background-pink-subtler: var(--pink-900);
-    }
-
-    [data-theme="light"] {
-        --color-background-pink-subtlest: var(--purple-50);
-    }
-
-    [data-theme="dark"] {
-        --color-background-pink-subtlest: var(--pink-950);
-    }
-
-
-
-    /* ----------------Blanket Color --------------- */
-    [data-theme="light"] {
-        --color-blanket: var(--darkBlue500-opacity20);
-    }
-
-    [data-theme="dark"] {
-        --color-blanket: var(--darkBlue200-opacity20);
-    }
-
-    [data-theme="light"] {
-        --color-blanket-subtle: var(--darkBlue500-opacity30);
-    }
-
-    [data-theme="dark"] {
-        --color-blanket-subtle: var(--darkBlue200-opacity30);
-    }
-
-    [data-theme="light"] {
-        --color-blanket-subtler: var(--darkBlue500-opacity40);
-    }
-
-    [data-theme="dark"] {
-        --color-blanket-subtler: var(--darkBlue200-opacity40);
-    }
-
-
-
-    /* ----------------Skeleton Color --------------- */
-    [data-theme="light"] {
-        --color-skeleton: var(--gray-200);
-    }
-
-    [data-theme="dark"] {
-        --color-skeleton: var(--gray-800);
-    }
-
-
-
-    /* ----------------Surface Color --------------- */
-    [data-theme="light"] {
-        --color-surface-bold: var(--gray-25);
-    }
-
-    [data-theme="dark"] {
-        --color-surface-bold: var(--gray-950);
-    }
-
-    [data-theme="light"] {
-        --color-surface: var(--base-white);
-    }
-
-    [data-theme="dark"] {
-        --color-surface: var(--gray-900);
-    }
-
-    [data-theme="light"] {
-        --color-surface-hovered: var(--gray-100); 
-    }
-
-    [data-theme="dark"] {
-        --color-surface-hovered: var(--gray-800);
-    }
-
-    [data-theme="light"] {
-        --color-surface-pressed: var(--gray-200);
-    }
-
-    [data-theme="dark"] {
-        --color-surface-pressed: var(--gray-700);
-    }
-}
-
-/* -----------------Shadow and Blur----------------- */
-:root{
-    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);   
-    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
-
-    --blur-sm: blur(4px);
-    --blur-md: blur(8px);
-    --blur-lg: blur(12px);
-    --blur-xl: blur(20px);
-}
-
-.shadow-xs{
-    box-shadow: var(--shadow-xs);
-}
-
-.shadow-sm{
-    box-shadow: var(--shadow-sm);
-}
-
-.shadow-md{
-    box-shadow: var(--shadow-md);
-}
-
-.shadow-lg{
-    box-shadow: var(--shadow-lg);
-}
-
-.shadow-xl{
-    box-shadow: var(--shadow-xl);
-}
-
-.shadow-2xl{
-    box-shadow: var(--shadow-2xl);
-}
-
-.shadow-3xl{
-    box-shadow: var(--shadow-3xl);
-}
-
-.blur-sm{
-    backdrop-filter: var(--blur-sm);
-}
-
-.blur-md{
-    backdrop-filter: var(--blur-md);
-}
-
-.blur-lg{
-    backdrop-filter: var(--blur-lg);
-}
-
-.blur-xl{
-    backdrop-filter: var(--blur-xl);
-}
-
-
-/* -----------------Gradients----------------- */
-:root{
-    /* Gray Gradients */
-    /* --gray-gradient-600: linear-gradient(); */
-    --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));
-    --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));
-    --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));
-    --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));
-    --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));
-    --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));
-
-    /* Brand Dark Blue Gradients */
-    --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));
-    --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));
-    --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));
-    --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));
-    --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));
-    --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));
-
-    /* Brand Red Gradients */
-    --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));
-    --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));
-    --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));
-    --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));
-    --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));
-    --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));
-
-    /* Blue Gradients */
-    --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));
-    --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));
-    --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));
-    --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));
-    --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));
-    --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));
-}
-
-.gradient-gray-600-to-500-90d {
-    background: var(--gradient-gray-600-to-500-90d);
-}
-
-.gradient-gray-700-to-600-45d {
-    background: var(--gradient-gray-700-to-600-45d);
-}
-
-.gradient-gray-800-to-600-45d {
-    background: var(--gradient-gray-800-to-600-45d);
-}
-
-.gradient-gray-800-to-600-90d {
-    background: var(--gradient-gray-800-to-600-90d);
-}
-
-.gradient-gray-800-to-700265-d {
-    background: var(--gradient-gray-800-to-700265-d);
-}
-
-.gradient-gray-900-to-600-45d {
-    background: var(--gradient-gray-900-to-600-45d);
-}
-
-.gradient-darkBlue-500-to-400-90d{
-    background: var(--gradient-darkBlue-500-to-400-90d);
-}
-
-.gradient-darkBlue-700-to-500-45d{
-    background: var(--gradient-darkBlue-700-to-500-45d);
-}
-
-.gradient-darkBlue-700-to-400-45d{
-    background: var(--gradient-darkBlue-700-to-400-45d);
-}
-
-.gradient-darkBlue-800-to-500-90d{
-    background: var(--gradient-darkBlue-800-to-500-90d);
-}
-
-.gradient-darkBlue-800-to-600265-d{
-    background: var(--gradient-darkBlue-800-to-600265-d);
-}
-
-.gradient-darkBlue-900-to-600-45d{
-    background: var(--gradient-darkBlue-900-to-600-45d);
-}
-
-.gradient-red-500-to-400-90d{
-    background: var(--gradient-red-500-to-400-90d);
-}
-
-.gradient-red-700-to-500-45d{
-    background: var(--gradient-red-700-to-500-45d);
-}
-
-.gradient-red-700-to-400-45d{
-    background: var(--gradient-red-700-to-400-45d);
-}
-
-.gradient-red-800-to-500-90d{
-    background: var(--gradient-red-800-to-500-90d);
-}
-
-.gradient-red-800-to-600265-d{
-    background: var(--gradient-red-800-to-600265-d);
-}
-
-.gradient-red-900-to-600-45d{
-    background: var(--gradient-red-900-to-600-45d);
-}
-
-.gradient-blue-500-to-400-90d{
-    background: var(--gradient-blue-500-to-400-90d);
-}
-
-.gradient-blue-700-to-500-45d{
-    background: var(--gradient-blue-700-to-500-45d);
-}
-
-.gradient-blue-700-to-400-45d{
-    background: var(--gradient-blue-700-to-400-45d);
-}
-
-.gradient-blue-800-to-500-90d{
-    background: var(--gradient-blue-800-to-500-90d);
-}
-
-.gradient-blue-800-to-600265-d{
-    background: var(--gradient-blue-800-to-600265-d);
-}
-
-.gradient-blue-900-to-600-45d{
-    background: var(--gradient-blue-900-to-600-45d);
-}
-
-:root{
-    /* h1, p {
-        font-size: 1.75rem;
-        line-height: 1.25rem;
-    }
-      
-    h1::before, p::before{
-        content: "";
-        margin-bottom: -0.005em;
-        display: table;
-    }
-      
-    h1::after, p::after {
-        content: "";
-        margin-top: -0.025em;
-        display: table;
-    } */
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;