cmat 0.0.21 → 0.0.23

package/styles/overrides/angular-material.scss

@@ -1,3 +1,4 @@
+@reference "tailwindcss/theme";
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Angular Material CDK helpers & overrides
 /* ----------------------------------------------------------------------------------------------------- */
@@ -11,7 +12,7 @@
 /*  @ Overlay
 /* ----------------------------------------------------------------------------------------------------- */
 .cmat-backdrop-on-mobile {
-    @apply bg-black bg-opacity-60 sm:bg-transparent  #{'!important'};
+    @apply bg-black/60 sm:bg-transparent;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -40,7 +41,7 @@
     border-radius: 8px !important;
     border-width: 1px;
     transition: box-shadow 225ms cubic-bezier(0.4, 0, 0.2, 1);
-    @apply border-gray-300 dark:border-gray-500 shadow #{'!important'};
+    @apply border-gray-300 dark:border-gray-500 shadow-sm;
 
     &:last-child {
         margin-bottom: 0;
@@ -48,7 +49,7 @@
 
     &.mat-expanded,
     &:hover {
-        @apply shadow-lg #{'!important'};
+        @apply shadow-lg;
     }
 
     &:not(.mat-expanded) {
@@ -89,7 +90,7 @@
 
     .mat-expansion-panel-body {
         line-height: 1.7;
-        @apply text-secondary #{'!important'};
+        @apply text-secondary;
     }
 }
 
@@ -210,7 +211,7 @@
 
     .dark & {
         --mat-mdc-button-persistent-ripple-color: theme('colors.black') !important;
-        --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
+        --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;  
     }
 
     .mat-icon {
@@ -218,10 +219,19 @@
     }
 
     .mat-ripple-element {
-        @apply bg-black/10 #{'!important'};
+        @apply bg-black/10;
     }
 }
 
+.mat-mdc-icon-button{
+    --mat-icon-button-hover-state-layer-opacity:0.04 !important;
+
+    .dark & {
+        --mat-icon-button-hover-state-layer-opacity:0.1 !important;
+    }
+
+}
+
 /* Color the icons of transparent background buttons */
 .mat-mdc-button,
 .mat-mdc-icon-button,
@@ -233,7 +243,7 @@
         &.mat-primary {
 
             .mat-icon {
-                @apply text-primary #{'!important'};
+                @apply text-primary;
             }
         }
 
@@ -241,7 +251,7 @@
         &.mat-accent {
 
             .mat-icon {
-                @apply text-accent #{'!important'};
+                @apply text-accent!;
             }
         }
 
@@ -249,7 +259,7 @@
         &.mat-warn {
 
             .mat-icon {
-                @apply text-warn #{'!important'};
+                @apply text-warn;
             }
         }
     }
@@ -260,12 +270,12 @@
 
     /* Not disabled */
     &:not([disabled=true]) {
-        @apply border-gray-300 dark:border-gray-500 #{'!important'};
+        @apply border-gray-300 dark:border-gray-500;
     }
 
     /* Disabled */
     &[disabled=true] {
-        @apply border-gray-300/70 dark:border-gray-600 #{'!important'};
+        @apply border-gray-300/70 dark:border-gray-600;
     }
 }
 
@@ -279,14 +289,13 @@
 
 .mat-mdc-icon-button{
     &:hover{
-        @apply animate-wiggle  #{'!important'};
+        @apply animate-wiggle;
     }
 }
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Button Toggle
 /* ----------------------------------------------------------------------------------------------------- */
 .mat-button-toggle-group {
-    border: none !important;
 
     &.mat-button-toggle-group-appearance-standard {
         .mat-button-toggle+.mat-button-toggle {
@@ -301,7 +310,7 @@
 
         &.mat-button-toggle-checked {
             .mat-button-toggle-label-content {
-                @apply text-primary  #{'!important'};
+                @apply text-primary;
             }
         }
 
@@ -323,6 +332,9 @@
         padding-right: 12px;
     }
 }
+.mat-mdc-checkbox.mat-mdc-checkbox-disabled label{
+    @apply text-disabled;
+}
 
 /* -------------------------------------------------------------------------- */
 /*  @ Chip
@@ -369,7 +381,7 @@
 
         /* Border color */
         .mat-mdc-text-field-wrapper {
-            @apply border-warn dark:border-warn #{'!important'};
+            @apply border-warn dark:border-warn;
         }
 
         /* Select */
@@ -377,7 +389,7 @@
 
             /* Placeholder color */
             .mat-mdc-select-placeholder {
-                @apply text-warn #{'!important'};
+                @apply text-warn;
             }
         }
     }
@@ -403,7 +415,7 @@
 
         /* Border color */
         .mat-mdc-text-field-wrapper {
-            @apply border-primary dark:border-primary #{'!important'};
+            @apply border-primary dark:border-primary;
         }
     }
 
@@ -440,7 +452,7 @@
         border-radius: 6px;
         border-width: 1px;
         border-style: solid;
-        @apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-20 dark:border-gray-500 #{'!important'};
+        @apply shadow-xs bg-white border-gray-300 dark:bg-black/20 dark:border-gray-500;
 
         /* Adjust the top spacing and overflow when mat-label present */
         &:not(.mdc-text-field--no-label) {
@@ -511,7 +523,7 @@
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
-                @apply text-hint #{'!important'};
+                @apply text-hint;
 
                 .mat-mdc-icon-button {
                     width: 40px;
@@ -541,7 +553,7 @@
                         .mat-mdc-select-trigger {
 
                             .mat-mdc-select-value {
-                                @apply text-primary #{'!important'};
+                                @apply text-primary;
                             }
 
                             .mat-mdc-select-arrow-wrapper {
@@ -577,7 +589,7 @@
 
                             .mat-mdc-select-arrow {
                                 min-height: 0;
-                                @apply text-gray-500 dark:text-gray-400 #{'!important'};
+                                @apply text-gray-500 dark:text-gray-400;
                             }
                         }
                     }
@@ -602,7 +614,7 @@
                     transform: none !important;
                     pointer-events: auto;
                     font-weight: 500;
-                    @apply text-default #{'!important'};
+                    @apply text-default;
                 }
 
                 /* Textarea */
@@ -635,7 +647,7 @@
         }
 
         .mat-mdc-form-field-hint {
-            @apply text-hint #{'!important'};
+            @apply text-hint;
         }
     }
 
@@ -891,7 +903,7 @@
                 .mat-mdc-form-field-text-prefix,
                 .mat-mdc-form-field-icon-suffix,
                 .mat-mdc-form-field-text-suffix {
-                    @apply bg-default border-gray-300 dark:border-gray-500 #{'!important'};
+                    @apply bg-default border-gray-300 dark:border-gray-500;
                 }
             }
         }
@@ -971,7 +983,7 @@
                     .mdc-notched-outline__leading,
                     .mdc-notched-outline__notch,
                     .mdc-notched-outline__trailing {
-                        @apply border-slate-300 dark:border-slate-500 #{'!important'};
+                        @apply border-slate-300 dark:border-slate-500;
                     }
                 }
             }
@@ -1022,22 +1034,22 @@
 
     &::placeholder {
         transition: none !important;
-        @apply text-hint #{'!important'};
+        @apply text-hint;
     }
 
     &::-moz-placeholder {
         transition: none !important;
-        @apply text-hint #{'!important'};
+        @apply text-hint;
     }
 
     &::-webkit-input-placeholder {
         transition: none !important;
-        @apply text-hint #{'!important'};
+        @apply text-hint;
     }
 
     &:-ms-input-placeholder {
         transition: none !important;
-        @apply text-hint #{'!important'};
+        @apply text-hint;
     }
 }
 
@@ -1048,19 +1060,19 @@
 
         /* Placeholder color */
         &::placeholder {
-            @apply text-warn #{'!important'};
+            @apply text-warn;
         }
 
         &::-moz-placeholder {
-            @apply text-warn #{'!important'};
+            @apply text-warn;
         }
 
         &::-webkit-input-placeholder {
-            @apply text-warn #{'!important'};
+            @apply text-warn;
         }
 
         &:-ms-input-placeholder {
-            @apply text-warn #{'!important'};
+            @apply text-warn;
         }
     }
 }
@@ -1087,8 +1099,7 @@
             }
 
             .mat-icon-no-color {
-                --tw-text-opacity: 1;
-                color: rgba(var(--cmat-icon-rgb), var(--tw-text-opacity));
+                color: rgba(var(--cmat-icon-rgb), 1);
             }
         }
 
@@ -1159,7 +1170,7 @@
 
     .mat-mdc-select-placeholder {
         transition: none !important;
-        @apply text-hint #{'!important'};
+        @apply text-hint;
     }
 
     .mat-mdc-select-trigger {
@@ -1194,6 +1205,11 @@
     @apply dark:border;
 }
 
+.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after,
+.mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate::after {
+  color:white !important;
+}
+
 /* -------------------------------------------------------------------------- */
 /*  @ Slide Toggle
 /* -------------------------------------------------------------------------- */
@@ -1223,10 +1239,10 @@
 }
 .mat-mdc-table {
     .mat-mdc-header-row{
-        @apply shadow text-md font-bold text-secondary;
+        @apply shadow-sm text-md font-bold text-secondary;
 
         .mat-mdc-header-cell{
-            @apply bg-slate-50 dark:bg-black dark:bg-opacity-20 #{'!important'};
+            @apply bg-slate-50 dark:bg-black;
         }
     }
 }
@@ -1289,23 +1305,23 @@ textarea.mat-mdc-input-element {
     &.mat-primary {
 
         .mat-icon {
-            @apply text-on-primary #{'!important'};
+            @apply text-on-primary;
         }
 
         .text-secondary {
-            @apply text-on-primary text-opacity-60 #{'!important'};
+            @apply text-on-primary/60;
         }
 
         .text-hint {
-            @apply text-on-primary text-opacity-38 #{'!important'};
+            @apply text-on-primary/38;
         }
 
         .text-disabled {
-            @apply text-on-primary text-opacity-38 #{'!important'};
+            @apply text-on-primary/38;
         }
 
         .divider {
-            @apply text-on-primary text-opacity-12 #{'!important'};
+            @apply text-on-primary/12;
         }
     }
 
@@ -1313,23 +1329,23 @@ textarea.mat-mdc-input-element {
     &.mat-accent {
 
         .mat-icon {
-            @apply text-on-accent #{'!important'};
+            @apply text-on-accent;
         }
 
         .text-secondary {
-            @apply text-on-accent text-opacity-60 #{'!important'};
+            @apply text-on-accent/60;
         }
 
         .text-hint {
-            @apply text-on-accent text-opacity-38 #{'!important'};
+            @apply text-on-accent/38;
         }
 
         .text-disabled {
-            @apply text-on-accent text-opacity-38 #{'!important'};
+            @apply text-on-accent/38;
         }
 
         .divider {
-            @apply text-on-accent text-opacity-12 #{'!important'};
+            @apply text-on-accent/12;
         }
     }
 
@@ -1337,23 +1353,23 @@ textarea.mat-mdc-input-element {
     &.mat-warn {
 
         .mat-icon {
-            @apply text-on-warn #{'!important'};
+            @apply text-on-warn;
         }
 
         .text-secondary {
-            @apply text-on-warn text-opacity-60 #{'!important'};
+            @apply text-on-warn/60;
         }
 
         .text-hint {
-            @apply text-on-warn text-opacity-38 #{'!important'};
+            @apply text-on-warn/38;
         }
 
         .text-disabled {
-            @apply text-on-warn text-opacity-38 #{'!important'};
+            @apply text-on-warn/38;
         }
 
         .divider {
-            @apply text-on-warn text-opacity-12 #{'!important'};
+            @apply text-on-warn/12;
         }
     }
 }
@@ -1415,8 +1431,8 @@ textarea.mat-mdc-input-element {
           height: auto;
           position: relative;
 
-          @apply max-h-64 shadow rounded-2xl flex flex-col p-6 overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom;
-          @apply bg-card #{'!important'};
+          @apply max-h-64 shadow-sm rounded-2xl flex flex-col p-6 overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom;
+          @apply bg-card;
 
           .mat-mdc-cell:not(:first-child){
             &>div{
@@ -1440,7 +1456,7 @@ textarea.mat-mdc-input-element {
           }
 
           .badge-column{
-            @apply py-0.5 px-3 leading-5 w-fit rounded-full text-sm font-semibold text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500 #{'!important'};
+            @apply py-0.5 px-3 leading-5 w-fit rounded-full text-sm font-semibold text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500;
           
           }
 
@@ -1449,7 +1465,7 @@ textarea.mat-mdc-input-element {
                margin:0 -1.5rem;
                position: sticky;
                bottom: 0;
-               @apply px-6 py-2 items-end text-right bg-gray-50 dark:bg-transparent space-x-1;
+               @apply px-6 py-2 items-end text-right bg-gray-50 dark:bg-transparent flex flex-row gap-1;
             }
           }
 
@@ -1479,10 +1495,10 @@ textarea.mat-mdc-input-element {
     .mat-mdc-table {    
         .mat-mdc-row{
             &:nth-child(even) {
-                @apply bg-slate-50 dark:bg-black dark:bg-opacity-20 #{'!important'};
+                @apply bg-slate-50 dark:bg-black/20;
             }
             &:hover{
-                @apply bg-slate-100 dark:bg-black dark:bg-opacity-40 #{'!important'};
+                @apply bg-slate-100 dark:bg-black/40;
             }
         }
     }

package/styles/overrides/fullcalendar.scss

@@ -1,3 +1,5 @@
+@reference "tailwindcss/theme";
+
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ FullCalendar overrides
 /* ----------------------------------------------------------------------------------------------------- */
@@ -358,7 +360,7 @@
                                 @apply h-full flex items-center;
 
                                 > a:first-child {
-                                    @apply flex flex-grow justify-start;
+                                    @apply flex grow justify-start;
                                 }
                             }
                         }

package/styles/overrides/quill.scss

@@ -1,3 +1,5 @@
+@reference "tailwindcss/theme";
+
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Quill editor overrides
 /* ----------------------------------------------------------------------------------------------------- */
@@ -5,11 +7,11 @@
     border-radius: 6px 6px 0 0;
     padding: 0 !important;
     @apply bg-slate-100;
-    @apply border-slate-300 border-opacity-100 #{!important};
+    @apply border-slate-300/100;
 
     .dark & {
-        background-color: rgba(0, 0, 0, 0.05);
-        @apply border-slate-500 #{!important};
+        background-color: rgba(0, 0, 0, 0.05) !important;
+        @apply border-slate-500;
     }
 
     .ql-formats {
@@ -66,7 +68,7 @@
     .ql-picker-label.ql-active,
     .ql-picker-item:hover,
     .ql-picker-item.ql-selected {
-        @apply text-primary #{!important};
+        @apply text-primary;
 
         .ql-stroke,
         .ql-stroke-mitter {
@@ -81,10 +83,10 @@
 
 .ql-container {
     border-radius: 0 0 6px 6px;
-    @apply border-slate-300 border-opacity-100 shadow-sm #{!important};
+    @apply border-slate-300/100 shadow-xs;
 
     .dark & {
-        @apply border-slate-500 #{!important};
+        @apply border-slate-500;
     }
 
     .ql-editor {

package/styles/tailwind.scss

@@ -1,8 +1,49 @@
-@tailwind base;
+@import "tailwindcss" important;
+
+@theme {
+    --color-slate-300: oklch(0.869 0.022 252.894); 
+    --color-slate-500: oklch(0.554 0.046 257.417); 
+    
+    --spacing: 0.25rem;
+
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+}
 
 @layer base {
-
     * {
+        font-family: 'AliPuHuiTi', sans-serif;
+        font-weight: 400;
+
         text-rendering: optimizeLegibility;
         -o-text-rendering: optimizeLegibility;
         -ms-text-rendering: optimizeLegibility;
@@ -11,10 +52,51 @@
         -webkit-tap-highlight-color: transparent;
 
         &:focus {
-            outline: none !important;
+            outline: none;
         }
     }
 
+    @font-face {
+        font-family: "AliPuHuiTi";
+        font-weight: 300;
+        src: url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/9h5VGOQoDZYl.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/ZNBWNQa9veoY.woff") format("woff");
+        font-display: swap;
+    }
+
+
+    @font-face {
+        font-family: "AliPuHuiTi";
+        font-weight: 400;
+        src: url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/zxZG2AFzPblS.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/Ug89Q4PaDfc0.woff") format("woff");
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "AliPuHuiTi";
+        font-weight: 500;
+        src: url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/iHLBGts4nfJk.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/M5baxmeyKXjA.woff") format("woff");
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "AliPuHuiTi";
+        font-weight: 600;
+        src: url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/ENq0nndzfIbV.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/OuKxFrSQmkWs.woff") format("woff");
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "AliPuHuiTi";
+        font-weight: 700;
+        src: url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/V1iTYPwc1Qhu.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/hIzeQ7f86wl2/9RvMt0f7HbS7.woff") format("woff");
+        font-display: swap;
+    }
+
     html,
     body {
         display: flex;
@@ -43,12 +125,16 @@
         border-bottom-width: 1px;
     }
 
-    body, .dark, .light {
-        @apply text-default bg-default #{'!important'};
+    body,
+    .dark,
+    .light {
+        @apply text-default bg-default;
     }
 
 
-    *, *::before, *::after {
+    *,
+    *::before,
+    *::after {
         --tw-border-opacity: 1 !important;
         border-color: rgba(var(--cmat-border-rgb), var(--tw-border-opacity));
 
@@ -58,7 +144,7 @@
     }
 
     [disabled] * {
-        @apply text-disabled  #{'!important'};
+        @apply text-disabled;
     }
 
     @media print {
@@ -67,16 +153,14 @@
             font-size: 12px !important;
         }
 
-        body, .dark, .light {
+        body,
+        .dark,
+        .light {
             background: none !important;
         }
     }
-
-    .scrollbar-custom {
-		@apply transition-colors scrollbar-thin scrollbar-thumb-primary-300 scrollbar-track-gray-300 scrollbar-thumb-rounded-md hover:scrollbar-thumb-primary-600 dark:scrollbar-track-gray-600;
-    }
 }
 
-@tailwind components;
-
-@tailwind utilities;
+@utility scrollbar-custom {
+    @apply scrollbar-thin scrollbar-thumb-primary-300 scrollbar-track-gray-300 scrollbar-thumb-rounded-md scrollbar-hover:scrollbar-thumb-primary-600 dark:scrollbar-track-gray-600;
+}