feat(fab): tweak FAB md3 styles and colors

Author: nolimits4web

src/core/components/fab/fab-vars.less

@@ -1,20 +1,20 @@
 :root {
   --f7-fab-margin: 16px;
   --f7-fab-extended-text-font-size: 14px;
-  --f7-fab-extended-text-padding: 0 20px;
   --f7-fab-label-padding: 4px 12px;
   --f7-fab-label-font-size: inherit;
   --f7-fab-button-size: 40px;
-  /* --f7-fab-bg-color: var(--f7-theme-color)); */
 }
 .ios-vars({
   /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
+  /* --f7-fab-bg-color: var(--f7-theme-color)); */
   --f7-fab-text-color: #fff;
   --f7-fab-border-radius: 50px;
   --f7-fab-size: 50px;
   --f7-fab-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
   --f7-fab-extended-text-transform: uppercase;
   --f7-fab-extended-size: 50px;
+  --f7-fab-extended-text-padding: 0 20px;
   --f7-fab-extended-text-font-weight: 600;
   --f7-fab-extended-text-letter-spacing: 0;
   --f7-fab-label-border-radius: 4px;
@@ -26,22 +26,21 @@
   /*
   --f7-fab-pressed-bg-color: var(--f7-fab-bg-color, var(--f7-theme-color));
   */
+
   --f7-fab-border-radius: 16px;
   --f7-fab-size: 56px;
-  --f7-fab-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-                       0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-                       0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-  --f7-fab-extended-size: 48px;
+  --f7-fab-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  --f7-fab-extended-size: 56px;
+  --f7-fab-extended-text-padding: 0 16px;
   --f7-fab-extended-text-font-weight: 500;
   --f7-fab-extended-text-letter-spacing: 0;
   --f7-fab-extended-text-transform: none;
   --f7-fab-label-border-radius: 8px;
-  --f7-fab-label-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-                             0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-                             0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
 });
 .md-color-vars({
-  --f7-fab-text-color: var(--f7-md-on-primary);
+  --f7-fab-bg-color: var(--f7-md-primary-container);
+  --f7-fab-text-color: var(--f7-md-on-primary-container);
   --f7-fab-label-text-color: var(--f7-md-on-surface);
   --f7-fab-label-bg-color: var(--f7-md-surface-5);
 });