@sumaris-net/ngx-components 2.7.3-rc70 → 2.7.3-rc72

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.7.3-rc70",
+  "version": "2.7.3-rc72",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "2.7.3-rc70",
+  "version": "2.7.3-rc72",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_ionic.globals.scss

@@ -54,7 +54,10 @@ $dark:        #222428 !default;
 $transparent: transparent;
 
 // Main background color
-$background-color: #fff !default;
+$background-color-value: #fff;
+$background-color-rgb-value: 255, 255, 255;
+$ion-toolbar-background: withesmoke !default;
+
 // Text color
 $dark-primary-text: rgba(black, 0.87);
 $dark-secondary-text: rgba(black, 0.54);
@@ -68,8 +71,6 @@ $text-color: $dark-primary-text;
 // --------------------------------------------------
 $overlay-background-color: var(--ion-overlay-background-color, #fafafa) !default;
 $ripple-background-color: var(--ion-ripple-background-color, #000) !default;
-$ion-toolbar-background: whitesomke !default;
-
 
 // Default padding
 // --------------------------------------------------

package/src/theme/_material.globals.scss

@@ -68,4 +68,4 @@ $mat-tab-bar-height: 48px !default;
 $mat-tab-animation-duration: 200ms !default;
 $mat-toolbar-height-desktop: 64px !default;
 $mat-toolbar-height-mobile: 56px !default;
-$mat-toolbar-background-color: var(--ion-toolbar-background) !default;
+$mat-toolbar-background-color: var(--ion-toolbar-background, var(--ion-background-color, whitesmoke)) !default;

package/src/theme/_mixins.scss

@@ -98,6 +98,8 @@
   --ion-grid-column-padding: #{$ion-grid-column-padding};
   --ion-padding: #{$ion-padding};
   --ion-margin: #{$ion-margin};
+  --ion-background-color: #{$background-color};
+  --ion-background-color-rgb: #{$background-color-rgb};
   --ion-toolbar-height: #{$ion-toolbar-height};
   --ion-toolbar-background: #{$ion-toolbar-background};
 

package/src/theme/_ngx-components.table.scss

@@ -546,7 +546,7 @@
 // Paginator
 .mat-mdc-paginator {
   --mat-paginator-container-size: var(--app-paginator-height, #{$app-paginator-height});
-  --mat-paginator-container-background-color: var(--ion-toolbar-background, #{$ion-toolbar-background});
+  --mat-paginator-container-background-color: var(--ion-toolbar-background, var(--ion-background-color, #{$ion-toolbar-background}));
   --mat-paginator-container-text-tracking: normal;
   --mat-paginator-container-text-color: var(--app-form-color, #{$app-form-color});
 

package/src/theme/_theme.variables.scss

@@ -1,12 +1,6 @@
-
-/** Ionic CSS Variables **/
+/** Inject all CSS Variables **/
 html {
   @include css-variables-to-root();
-
-  --ion-background-color: white;
-  --ion-background-color-rgb: 255, 255, 255;
-  --ion-toolbar-background: whitesmoke;
-
 }
 
 html.dark {
@@ -75,6 +69,53 @@ html.dark {
 
 }
 
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+html.ios.dark {
+  --ion-background-color: #000000;
+  --ion-background-color-rgb: 0, 0, 0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-item-background: #000000;
+
+  --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
+ * -------------------------------------------
+ */
 
 html.md.dark {
 
@@ -82,10 +123,11 @@ html.md.dark {
   --app-form-color: var(--ion-text-color);
 
   --ion-background-color: #121212;
-  --ion-background-color-rgb: 18, 18, 18;
+  --ion-background-color-rgb: 18,18,18; // #{color-to-rgb-list(#121212)};
+  --ion-toolbar-background: #1f1f1f;
 
   --ion-text-color: #ffffffde;
-  --ion-text-color-rgb: 255, 255, 255;
+  --ion-text-color-rgb: 255,255,255; // #{color-to-rgb-list(#ffffff)};
 
   --ion-border-color: #222222;
 
@@ -111,15 +153,13 @@ html.md.dark {
 
   --ion-item-background: #1e1e1e;
 
-  --ion-toolbar-background: #1f1f1f;
-
   --ion-tab-bar-background: #1f1f1f;
 
   --ion-card-background: #1e1e1e;
 
   ion-menu ion-content {
     --background: transparent;
-    --background-color: rgba(var(--ion-color-primary900-rgb), 0.4) !important;
+    --background-color: var(--ion-background-color) !important;
   }
 
   //.mat-mdc-table {