feat(photo-browser): m3 styles

nolimits4web · nolimits4web · commit f065f630ecfd · 2022-10-14T13:45:17.000+03:00
diff --git a/src/core/components/app/app-vars.less b/src/core/components/app/app-vars.less
@@ -96,6 +96,7 @@
   --f7-line-height: 1.5;
   --f7-bars-border-color: transparent;
   --f7-bars-bg-color: var(--f7-md-surface-2);
+  --f7-bars-bg-color-rgb: var(--f7-md-surface-2-rgb);
   .light-vars({
     --f7-text-color: #212121;
   });
diff --git a/src/core/components/photo-browser/photo-browser-class.js b/src/core/components/photo-browser/photo-browser-class.js
@@ -189,8 +189,7 @@ class PhotoBrowser extends Framework7Class {
     const pb = this;
     if (pb.params.renderNavbar) return pb.params.renderNavbar.call(pb);
 
-    let iconsColor = pb.params.iconsColor;
-    if (!pb.params.iconsColor && pb.params.theme === 'dark') iconsColor = 'white';
+    const iconsColor = pb.params.iconsColor;
 
     const pageBackLinkText =
       pb.app.theme === 'ios' && pb.params.pageBackLinkText ? pb.params.pageBackLinkText : '';
@@ -240,8 +239,7 @@ class PhotoBrowser extends Framework7Class {
     const pb = this;
     if (pb.params.renderToolbar) return pb.params.renderToolbar.call(pb);
 
-    let iconsColor = pb.params.iconsColor;
-    if (!pb.params.iconsColor && pb.params.theme === 'dark') iconsColor = 'white';
+    const iconsColor = pb.params.iconsColor;
 
     return (
       <div class="toolbar toolbar-bottom tabbar">
diff --git a/src/core/components/photo-browser/photo-browser-vars.less b/src/core/components/photo-browser/photo-browser-vars.less
@@ -1,10 +1,8 @@
 :root {
   --f7-photobrowser-bg-color: #fff;
-  /*
   --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
   --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
   --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
-  */
   --f7-photobrowser-caption-font-size: 14px;
   --f7-photobrowser-caption-light-text-color: #000;
   --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
diff --git a/src/core/shared/utils.js b/src/core/shared/utils.js
@@ -351,6 +351,16 @@ export function colorThemeCSSProperties(...args) {
   const shadeTintIos = getShadeTintColors(rgb);
   const shadeTintMdLight = getShadeTintColors(colorHexToRgb(light['--f7-md-primary']));
   const shadeTintMdDark = getShadeTintColors(colorHexToRgb(dark['--f7-md-primary']));
+  Object.keys(light).forEach((key) => {
+    if (key.includes('surface-')) {
+      light[`${key}-rgb`] = colorHexToRgb(light[key]);
+    }
+  });
+  Object.keys(dark).forEach((key) => {
+    if (key.includes('surface-')) {
+      dark[`${key}-rgb`] = colorHexToRgb(dark[key]);
+    }
+  });
   return {
     ios: {
       '--f7-theme-color': 'var(--f7-ios-primary)',
