@sumaris-net/ngx-components 2.8.14 → 2.9.0-alpha2

package/src/theme/_theme.variables.scss

@@ -5,72 +5,91 @@ html {
   &.plt-mobile {
     @include css-variables-to-root-mobile();
   }
-}
-
-html.dark {
-  --ion-color-primary: #428cff;
-  --ion-color-primary-rgb: 66, 140, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
-
-  --ion-color-secondary: #75C4FD;
-  --ion-color-secondary-rgb: 117, 196, 253;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
-
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106, 100, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47, 223, 117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #FF6434;
-  --ion-color-warning-rgb: 255, 100, 52;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #E0BB4B;
-  --ion-color-warning-tint: #FFDA48;
-
-  --ion-color-danger: #fa0021;
-  --ion-color-danger-rgb: 255, 0, 33;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
-
-  --ion-color-dark: #f4f5f8;
-  --ion-color-dark-rgb: 244, 245, 248;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0, 0, 0;
-  --ion-color-dark-shade: #d7d8da;
-  --ion-color-dark-tint: #f5f6f9;
-
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  --ion-color-light: #222428;
-  --ion-color-light-rgb: 34, 36, 40;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255, 255, 255;
-  --ion-color-light-shade: #1e2023;
-  --ion-color-light-tint: #383a3e;
 
+  &.dark {
+
+    @include css-variables-to-root-dark();
+
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #75C4FD;
+    --ion-color-secondary-rgb: 117, 196, 253;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #FF6434;
+    --ion-color-warning-rgb: 255, 100, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #E0BB4B;
+    --ion-color-warning-tint: #FFDA48;
+
+    --ion-color-danger: #fa0021;
+    --ion-color-danger-rgb: 255, 0, 33;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+
+    --mat-select-panel-background-color: var(--ion-color-step-100);
+
+    ion-modal {
+      --ion-background-color: var(--ion-color-step-100);
+      --ion-toolbar-background: var(--ion-color-step-150);
+      --ion-toolbar-border-color: var(--ion-color-step-250);
+    }
+
+    ion-alert {
+      --ion-background-color: var(--ion-color-step-100);
+    }
+
+    ion-menu#menu {
+      --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
+      --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
+    }
+  }
 }
 
 /*
@@ -79,9 +98,16 @@ html.dark {
  */
 
 html.ios.dark {
+  --app-form-color-disabled: #949494;
+  --app-form-color: var(--ion-text-color);
+  --app-form-field-background-color: var(--ion-color-light-tint);
+  //--app-form-field-disabled-background-color: var(--ion-color-light);
+
   --ion-background-color: #000000;
   --ion-background-color-rgb: 0, 0, 0;
 
+  //--ion-toolbar-background: #1f1f1f;
+
   --ion-text-color: #ffffff;
   --ion-text-color-rgb: 255, 255, 255;
 
@@ -110,12 +136,6 @@ html.ios.dark {
   --ion-card-background: #1c1c1d;
 }
 
-.ios ion-modal {
-  --ion-background-color: var(--ion-color-step-100);
-  --ion-toolbar-background: var(--ion-color-step-150);
-  --ion-toolbar-border-color: var(--ion-color-step-250);
-}
-
 /*
  * Material Design Dark Theme
  * -------------------------------------------
@@ -125,9 +145,11 @@ html.md.dark {
 
   --app-form-color-disabled: #949494;
   --app-form-color: var(--ion-text-color);
+  --app-form-field-background-color: var(--ion-color-light-tint);
+  --app-form-field-label-color: #949494;
 
   --ion-background-color: #121212;
-  --ion-background-color-rgb: 18,18,18; // #{color-to-rgb-list(#121212)};
+  --ion-background-color-rgb: 18,18,18;
   --ion-toolbar-background: #1f1f1f;
 
   --ion-text-color: #ffffffde;