cax-design-system 1.2.13 → 2.0.0

package/resources/styles/colors.scss

@@ -0,0 +1,397 @@
+:root {
+    --primary-25: var(--blue-25);
+    --primary-50: var(--blue-50);
+    --primary-75: var(--blue-75);
+    --primary-100: var(--blue-100);
+    --primary-125: var(--blue-125);
+    --primary-150: var(--blue-150);
+    --primary-200: var(--blue-200);
+    --primary-300: var(--blue-300);
+    --primary-400: var(--blue-400);
+    --primary-500: var(--blue-500);
+    --primary-600: var(--blue-600);
+    --primary-700: var(--blue-700);
+    --primary-750: var(--blue-750);
+    --primary-775: var(--blue-775);
+    --primary-800: var(--blue-800);
+    --primary-825: var(--blue-825);
+    --primary-850: var(--blue-850);
+    --primary-875: var(--blue-875);
+    --primary-900: var(--blue-900);
+
+    --neutral-25: var(--grey-25);
+    --neutral-50: var(--grey-50);
+    --neutral-75: var(--grey-75);
+    --neutral-100: var(--grey-100);
+    --neutral-125: var(--grey-125);
+    --neutral-150: var(--grey-150);
+    --neutral-200: var(--grey-200);
+    --neutral-300: var(--grey-300);
+    --neutral-400: var(--grey-400);
+    --neutral-500: var(--grey-500);
+    --neutral-600: var(--grey-600);
+    --neutral-700: var(--grey-700);
+    --neutral-750: var(--grey-750);
+    --neutral-775: var(--grey-775);
+    --neutral-800: var(--grey-800);
+    --neutral-825: var(--grey-825);
+    --neutral-850: var(--grey-850);
+    --neutral-875: var(--grey-875);
+    --neutral-900: var(--grey-900);
+
+    --error-25: var(--red-25);
+    --error-50: var(--red-50);
+    --error-75: var(--red-75);
+    --error-100: var(--red-100);
+    --error-125: var(--red-125);
+    --error-150: var(--red-150);
+    --error-200: var(--red-200);
+    --error-300: var(--red-300);
+    --error-400: var(--red-400);
+    --error-500: var(--red-500);
+    --error-600: var(--red-600);
+    --error-700: var(--red-700);
+    --error-750: var(--red-750);
+    --error-775: var(--red-775);
+    --error-800: var(--red-800);
+    --error-825: var(--red-825);
+    --error-850: var(--red-850);
+    --error-875: var(--red-875);
+    --error-900: var(--red-900);
+
+    --success-25: var(--green-25);
+    --success-50: var(--green-50);
+    --success-75: var(--green-75);
+    --success-100: var(--green-100);
+    --success-125: var(--green-125);
+    --success-150: var(--green-150);
+    --success-200: var(--green-200);
+    --success-300: var(--green-300);
+    --success-400: var(--green-400);
+    --success-500: var(--green-500);
+    --success-600: var(--green-600);
+    --success-700: var(--green-700);
+    --success-750: var(--green-750);
+    --success-775: var(--green-775);
+    --success-800: var(--green-800);
+    --success-825: var(--green-825);
+    --success-850: var(--green-850);
+    --success-875: var(--green-875);
+    --success-900: var(--green-900);
+
+    --warning-25: var(--orange-25);
+    --warning-50: var(--orange-50);
+    --warning-75: var(--orange-75);
+    --warning-100: var(--orange-100);
+    --warning-125: var(--orange-125);
+    --warning-150: var(--orange-150);
+    --warning-200: var(--orange-200);
+    --warning-300: var(--orange-300);
+    --warning-400: var(--orange-400);
+    --warning-500: var(--orange-500);
+    --warning-600: var(--orange-600);
+    --warning-700: var(--orange-700);
+    --warning-750: var(--orange-750);
+    --warning-775: var(--orange-775);
+    --warning-800: var(--orange-800);
+    --warning-825: var(--orange-825);
+    --warning-850: var(--orange-850);
+    --warning-875: var(--orange-875);
+    --warning-900: var(--orange-900);
+}
+
+:root {
+    --white-10: #ffffff1a;
+    --white-20: #ffffff33;
+    --white-30: #ffffff4d;
+    --white-40: #ffffff66;
+    --white-50: #ffffff80;
+    --white-60: #ffffff99;
+    --white-70: #ffffffb2;
+    --white-80: #ffffffcc;
+    --white-90: #ffffffe5;
+    --white-100: #ffffff;
+
+    --black-10: #0000001a;
+    --black-20: #00000033;
+    --black-30: #0000004d;
+    --black-40: #00000066;
+    --black-50: #00000080;
+    --black-60: #00000099;
+    --black-70: #000000b2;
+    --black-80: #000000cc;
+    --black-90: #000000e5;
+    --black-100: #000000;
+
+    --blue-25: #f0f4fe;
+    --blue-50: #e7edfe;
+    --blue-75: #dde6fd;
+    --blue-100: #cfdbfc;
+    --blue-125: #c0d0fc;
+    --blue-150: #b6c8fb;
+    --blue-200: #9eb6fa;
+    --blue-300: #6e92f7;
+    --blue-400: #3d6ef5;
+    --blue-500: #0c4af3;
+    --blue-600: #0a3bc2;
+    --blue-700: #072c92;
+    --blue-750: #062579;
+    --blue-775: #062270;
+    --blue-800: #051e61;
+    --blue-825: #041952;
+    --blue-850: #041649;
+    --blue-875: #03133f;
+    --blue-900: #030f30;
+
+    --grey-25: #f6f7f8;
+    --grey-50: #f1f2f4;
+    --grey-75: #ebecef;
+    --grey-100: #e2e4e9;
+    --grey-125: #dadde2;
+    --grey-150: #d4d7dd;
+    --grey-200: #c6cad2;
+    --grey-300: #a9afbc;
+    --grey-400: #8d95a5;
+    --grey-500: #707a8f;
+    --grey-600: #5a6272;
+    --grey-700: #434956;
+    --grey-750: #383d47;
+    --grey-775: #343842;
+    --grey-800: #2d3139;
+    --grey-825: #262a31;
+    --grey-850: #22252b;
+    --grey-875: #1d2025;
+    --grey-900: #16181d;
+
+    --red-25: #fff0f0;
+    --red-50: #ffe5e5;
+    --red-75: #ffdbdb;
+    --red-100: #ffcccc;
+    --red-125: #ffbdbd;
+    --red-150: #ffb2b2;
+    --red-200: #ff9999;
+    --red-300: #ff6666;
+    --red-400: #ff3333;
+    --red-500: #ff0000;
+    --red-600: #cc0000;
+    --red-700: #990000;
+    --red-750: #800000;
+    --red-775: #750000;
+    --red-800: #660000;
+    --red-825: #570000;
+    --red-850: #4c0000;
+    --red-875: #420000;
+    --red-900: #330000;
+
+    --green-25: #f5faf5;
+    --green-50: #eef7ee;
+    --green-75: #e7f3e7;
+    --green-100: #ddeedd;
+    --green-125: #d2e9d2;
+    --green-150: #cbe6cb;
+    --green-200: #badeba;
+    --green-300: #98cd98;
+    --green-400: #75bd75;
+    --green-500: #53ac53;
+    --green-600: #428a42;
+    --green-700: #326732;
+    --green-750: #295629;
+    --green-775: #264f26;
+    --green-800: #214521;
+    --green-825: #1c3b1c;
+    --green-850: #193419;
+    --green-875: #162d16;
+    --green-900: #112211;
+
+    --orange-25: #fff6f0;
+    --orange-50: #fef0e6;
+    --orange-75: #feeadc;
+    --orange-100: #fee1cd;
+    --orange-125: #fdd9be;
+    --orange-150: #fdd3b4;
+    --orange-200: #fcc49c;
+    --orange-300: #fba66a;
+    --orange-400: #fa8938;
+    --orange-500: #f96b06;
+    --orange-600: #c75605;
+    --orange-700: #954004;
+    --orange-750: #7c3603;
+    --orange-775: #723103;
+    --orange-800: #632b03;
+    --orange-825: #552402;
+    --orange-850: #4b2002;
+    --orange-875: #411c02;
+    --orange-900: #321501;
+
+    --pink-25: #fff0f0;
+    --pink-100: #f9d2df;
+    --pink-200: #f2a6bf;
+    --pink-500: #df2060;
+    --pink-700: #861339;
+    --pink-800: #590d26;
+
+    --purple-25: #f5f4fb;
+    --purple-100: #dedaf1;
+    --purple-200: #bdb5e3;
+    --purple-500: #5946b9;
+    --purple-700: #362a6f;
+    --purple-800: #241c4a;
+
+    --teal-25: #f3fcfa;
+    --teal-100: #d6f5f0;
+    --teal-200: #adebe0;
+    --teal-500: #33ccb2;
+    --teal-700: #1f7a6b;
+    --teal-800: #145247;
+
+    --logo-blue-500: #20bedf;
+}
+
+// @media (prefers-color-scheme: dark) {
+//     :root {
+//         --white-10: #0000001a;
+//         --white-20: #00000033;
+//         --white-30: #0000004d;
+//         --white-40: #00000066;
+//         --white-50: #00000080;
+//         --white-60: #00000099;
+//         --white-70: #000000b2;
+//         --white-80: #000000cc;
+//         --white-90: #000000e5;
+//         --white-100: #000000;
+
+//         --black-10: #0000001a;
+//         --black-20: #00000033;
+//         --black-30: #0000004d;
+//         --black-40: #00000066;
+//         --black-50: #00000080;
+//         --black-60: #00000099;
+//         --black-70: #000000b2;
+//         --black-80: #000000cc;
+//         --black-90: #000000e5;
+//         --black-100: #000000;
+
+//         --blue-25: #02020e;
+//         --blue-50: #030317;
+//         --blue-75: #040425;
+//         --blue-100: #05052e;
+//         --blue-125: #07073c;
+//         --blue-150: #080845;
+//         --blue-200: #0a0a5c;
+//         --blue-300: #0f0f8a;
+//         --blue-400: #1414b8;
+//         --blue-500: #1919e6;
+//         --blue-600: #4747eb;
+//         --blue-700: #7575f0;
+//         --blue-750: #8c8cf2;
+//         --blue-775: #9a9af4;
+//         --blue-800: #a3a3f5;
+//         --blue-825: #b1b1f6;
+//         --blue-850: #babaf7;
+//         --blue-875: #c3c3f8;
+//         --blue-900: #d1d1fa;
+
+//         --grey-25: #0f1215;
+//         --grey-50: #161a1d;
+//         --grey-75: #1c2126;
+//         --grey-100: #21262c;
+//         --grey-125: #272e34;
+//         --grey-150: #2e363e;
+//         --grey-200: #364049;
+//         --grey-300: #4c5967;
+//         --grey-400: #617384;
+//         --grey-500: #7b8c9e;
+//         --grey-600: #98a6b3;
+//         --grey-700: #b6bfc9;
+//         --grey-750: #c7cfd6;
+//         --grey-775: #cdd4da;
+//         --grey-800: #d3d9de;
+//         --grey-825: #dce0e5;
+//         --grey-850: #e5e8eb;
+//         --grey-875: #eaedf0;
+//         --grey-900: #f0f2f4;
+
+//         --red-25: #200404;
+//         --red-50: #320606;
+//         --red-75: #3c0707;
+//         --red-100: #450808;
+//         --red-125: #530909;
+//         --red-150: #610a0a;
+//         --red-200: #730d0d;
+//         --red-300: #a11212;
+//         --red-400: #cf1717;
+//         --red-500: #e83030;
+//         --red-600: #ed5e5e;
+//         --red-700: #f28c8c;
+//         --red-750: #f5a8a8;
+//         --red-775: #f6b1b1;
+//         --red-800: #f7baba;
+//         --red-825: #f9c8c8;
+//         --red-850: #fad6d6;
+//         --red-875: #fbdfdf;
+//         --red-900: #fce8e8;
+
+//         --green-25: #0c170c;
+//         --green-50: #142414;
+//         --green-75: #172b17;
+//         --green-100: #1b321b;
+//         --green-125: #203c20;
+//         --green-150: #254625;
+//         --green-200: #2d532d;
+//         --green-300: #3e743e;
+//         --green-400: #509550;
+//         --green-500: #69af69;
+//         --green-600: #8bc18b;
+//         --green-700: #acd3ac;
+//         --green-750: #c0ddc0;
+//         --green-775: #c7e1c7;
+//         --green-800: #cde4cd;
+//         --green-825: #d7ead7;
+//         --green-850: #e1efe1;
+//         --green-875: #e8f3e8;
+//         --green-900: #eef6ee;
+
+//         --orange-25: #0f0601;
+//         --orange-50: #190b01;
+//         --orange-75: #220f01;
+//         --orange-100: #311502;
+//         --orange-125: #3f1b03;
+//         --orange-150: #491f04;
+//         --orange-200: #612905;
+//         --orange-300: #913e08;
+//         --orange-400: #c2530a;
+//         --orange-500: #f2680d;
+//         --orange-600: #f5863d;
+//         --orange-700: #f7a46e;
+//         --orange-750: #f8b386;
+//         --orange-775: #f9bc95;
+//         --orange-800: #fac29e;
+//         --orange-825: #fbcbad;
+//         --orange-850: #fbd1b6;
+//         --orange-875: #fcd7c0;
+//         --orange-900: #fde0ce;
+
+//         --pink-25: #590d26;
+//         --pink-100: #861339;
+//         --pink-200: #df2060;
+//         --pink-500: #f2a6bf;
+//         --pink-700: #f9d2df;
+//         --pink-800: #fff0f0;
+
+//         --purple-25: #241c4a;
+//         --purple-100: #362a6f;
+//         --purple-200: #5946b9;
+//         --purple-500: #bdb5e3;
+//         --purple-700: #dedaf1;
+//         --purple-800: #f5f4fb;
+
+//         --teal-25: #145247;
+//         --teal-100: #1f7a6b;
+//         --teal-200: #33ccb2;
+//         --teal-500: #adebe0;
+//         --teal-700: #d6f5ef;
+//         --teal-800: #f3fcfa;
+
+//         --logo-blue-500: #20bedf;
+//     }
+// }

package/resources/styles/shadow-blur.scss

@@ -0,0 +1,22 @@
+:root {
+// Define shadow variables
+--shadow-2xl-1: 0px 24px 40px -4px;
+--shadow-2xl-2: 0px 6px 16px -2px;
+--shadow-xl-1: 0px 16px 24px -2px;
+--shadow-xl-2: 0px 4px 8px -2px;
+--shadow-lg-1: 0px 8px 12px -2px;
+--shadow-lg-2: 0px 2px 6px -2px;
+--shadow-md-1: 0px 4px 6px -1px;
+--shadow-md-2: 0px 2px 4px -1px;
+--shadow-sm-1: 0px 1px 3px 0px;
+--shadow-sm-2: 0px 1px 2px 0px;
+--shadow-xs: 0px 1px 2px 0px;
+
+// Define blur variables
+--blur-0: blur(0px);
+--blur-100: blur(2px);
+--blur-200: blur(4px);
+--blur-300: blur(6px);
+--blur-400: blur(8px);
+--blur-500: blur(10px);
+}

package/resources/styles/space-radius-border.scss

@@ -0,0 +1,49 @@
+:root {
+    // Define space variables
+    --space-25: 2px;
+    --space-50: 4px;
+    --space-75: 6px;
+    --space-100: 8px;
+    --space-150: 12px;
+    --space-200: 16px;
+    --space-250: 20px;
+    --space-300: 24px;
+    --space-350: 28px;
+    --space-400: 32px;
+    --space-450: 36px;
+    --space-500: 40px;
+    --space-600: 48px;
+    --space-700: 56px;
+    --space-800: 64px;
+    --space-900: 72px;
+    --space-1000: 80px;
+
+    // Define border-radius variables
+    --radius-0: 0px;
+    --radius-25: 2px;
+    --radius-50: 4px;
+    --radius-75: 6px;
+    --radius-100: 8px;
+    --radius-150: 12px;
+    --radius-200: 16px;
+    --radius-300: 24px;
+    --radius-400: 32px;
+    --radius-500: 40px;
+    --radius-600: 48px;
+    --radius-700: 56px;
+    --radius-800: 64px;
+    --radius-900: 72px;
+    --radius-1000: 80px;
+    --radius-rounded: 100000px;
+
+    // Define border sizes
+    --border-0: 0px;
+    --border-50: 0.5px;
+    --border-100: 1px;
+    --border-150: 1.5px;
+    --border-200: 2px;
+    --border-250: 2.5px;
+    --border-300: 3px;
+    --border-400: 4px;
+    --border-500: 5px;
+}

package/resources/styles/typography.scss

@@ -0,0 +1,135 @@
+@layer cax {
+    .cax-text-fw-light {
+        font-weight: 300;
+    }
+    .cax-text-fw-regular {
+        font-weight: 400 !important;
+    }
+    .cax-text-fw-medium {
+        font-weight: 500 !important;
+    }
+    .cax-text-fw-semibold {
+        font-weight: 600;
+    }
+    .cax-text-fw-bold {
+        font-weight: 700;
+    }
+
+    .cax-text-display-lg {
+        font-size: 96px;
+        line-height: 124px;
+        letter-spacing: -2px;
+    }
+
+    .cax-text-display-md {
+        font-size: 72px;
+        line-height: 96px;
+        letter-spacing: -2px;
+    }
+
+    .cax-text-display-sm {
+        font-size: 56px;
+        line-height: 72px;
+        letter-spacing: -2px;
+    }
+
+    .cax-text-heading-2xl {
+        font-size: 40px;
+        line-height: 52px;
+        letter-spacing: -2px;
+    }
+
+    .cax-text-heading-xl {
+        font-size: 32px;
+        line-height: 40px;
+        letter-spacing: -2px;
+    }
+
+    .cax-text-heading-lg {
+        font-size: 28px;
+        line-height: 36px;
+    }
+
+    .cax-text-heading-md {
+        font-size: 24px;
+        line-height: 32px;
+    }
+
+    .cax-text-heading-sm {
+        font-size: 20px;
+        line-height: 28px;
+    }
+
+    .cax-text-heading-xs {
+        font-size: 18px;
+        line-height: 24px;
+    }
+
+    .cax-text-body-lg {
+        font-size: 18px;
+        line-height: 26px;
+    }
+
+    .cax-text-body-md {
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    .cax-text-body-sm {
+        font-size: 14px;
+        line-height: 24px;
+    }
+
+    .cax-text-body-xs {
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .cax-text-action-lg {
+        font-size: 18px;
+        line-height: 28px;
+        text-decoration: none;
+    }
+
+    .cax-text-action-link-lg {
+        font-size: 18px;
+        line-height: 28px;
+        text-decoration: underline;
+    }
+
+    .cax-text-action-md {
+        font-size: 16px;
+        line-height: 24px;
+        text-decoration: none;
+    }
+
+    .cax-text-action-link-md {
+        font-size: 16px;
+        line-height: 24px;
+        text-decoration: underline;
+    }
+
+    .cax-text-action-sm {
+        font-size: 14px;
+        line-height: 20px;
+        text-decoration: none;
+    }
+
+    .cax-text-action-link-sm {
+        font-size: 14px;
+        line-height: 20px;
+        text-decoration: underline;
+    }
+
+    .cax-text-action-xs {
+        font-size: 12px;
+        line-height: 18px;
+        text-decoration: none;
+    }
+
+    .cax-text-action-link-xs {
+        font-size: 12px;
+        line-height: 18px;
+        text-decoration: underline;
+    }
+}

package/table/components/table-checkbox/table-checkbox.d.ts

@@ -17,6 +17,7 @@ export declare class TableCheckbox {
     checked: boolean | undefined;
     focused: boolean | undefined;
     subscription: Subscription;
+    isHovered: boolean;
     constructor(dt: Table, tableService: TableService, cd: ChangeDetectorRef);
     ngOnInit(): void;
     onClick(event: Event): void;

package/table/directives/cell-highlight.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef, OnInit, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class CellHighlightDirective implements OnInit {
+    private el;
+    private renderer;
+    caxCellHighlight: 'default' | 'error';
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    private getHighlightClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CellHighlightDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CellHighlightDirective, "[caxCellHighlight]", never, { "caxCellHighlight": { "alias": "caxCellHighlight"; "required": false; }; }, {}, never, never, true, never>;
+}

package/table/directives/dynamic-column-width.directive.d.ts

@@ -0,0 +1,12 @@
+import { ElementRef, Renderer2, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DynamicColumnWidth implements OnInit {
+    private el;
+    private renderer;
+    minWidth?: string;
+    maxWidth?: string;
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicColumnWidth, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicColumnWidth, "[caxColumnWidth]", never, { "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, {}, never, never, true, never>;
+}

package/table/public_api.d.ts

@@ -26,3 +26,5 @@ export * from './directives/save-editable-row.directive';
 export * from './directives/selectable-row-double-click.directive';
 export * from './directives/selectable-row.directive';
 export * from './directives/sortable-column.directive';
+export * from './directives/dynamic-column-width.directive';
+export * from './directives/cell-highlight.directive';