feat(button): new tonal buttons

framework7io · Sep 27, 2022 · 32daed7 · 32daed7
1 parent fd4e1f9
commit 32daed7
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 0 deletions.
diff --git a/kitchen-sink/core/pages/buttons.html b/kitchen-sink/core/pages/buttons.html
@@ -22,6 +22,14 @@
           <button class="button col button-round">Round</button>
         </div>
       </div>
+      <div class="block-title">Tonal Buttons</div>
+      <div class="block block-strong">
+        <div class="row">
+          <button class="button col button-tonal">Button</button>
+          <button class="button col button-tonal">Button</button>
+          <button class="button col button-tonal button-round">Round</button>
+        </div>
+      </div>
       <div class="block-title">Fill Buttons</div>
       <div class="block block-strong">
         <div class="row">

diff --git a/src/core/components/button/button-vars.less b/src/core/components/button/button-vars.less
@@ -62,6 +62,10 @@
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 600;
 
+  --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
+  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
+  --f7-button-tonal-text-color: var(--f7-theme-color);
+
   .light-vars({
     --f7-segmented-strong-bg-color: rgba(0,0,0,0.07);
   });
@@ -98,4 +102,8 @@
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 500;
 
+  --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
+  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
+  --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
+
 });
diff --git a/src/core/components/button/button.less b/src/core/components/button/button.less
@@ -98,6 +98,14 @@ button {
   --f7-button-border-width: var(--f7-button-outline-border-width);
 }
 
+.button-tonal,
+.ios .button-tonal-ios,
+.md .button-tonal-md {
+  --f7-button-bg-color: var(--f7-button-tonal-bg-color);
+  --f7-button-text-color: var(--f7-button-tonal-text-color);
+  --f7-button-pressed-bg-color: var(--f7-button-tonal-pressed-bg-color);
+}
+
 .button-large,
 .ios .button-large-ios,
 .md .button-large-md {

diff --git a/src/react/components/button.jsx b/src/react/components/button.jsx
@@ -29,6 +29,9 @@ import Preloader from './preloader.js';
   fill? : boolean
   fillMd? : boolean
   fillIos? : boolean
+  tonal? : boolean
+  tonalMd? : boolean
+  tonalIos? : boolean
   large? : boolean
   largeMd? : boolean
   largeIos? : boolean
@@ -76,6 +79,9 @@ const Button = forwardRef((props, ref) => {
     fill,
     fillIos,
     fillMd,
+    tonal,
+    tonalIos,
+    tonalMd,
     large,
     largeIos,
     largeMd,
@@ -126,6 +132,9 @@ const Button = forwardRef((props, ref) => {
         'button-fill': fill,
         'button-fill-ios': fillIos,
         'button-fill-md': fillMd,
+        'button-tonal': tonal,
+        'button-tonal-ios': tonalIos,
+        'button-tonal-md': tonalMd,
         'button-large': large,
         'button-large-ios': largeIos,
         'button-large-md': largeMd,

diff --git a/src/svelte/components/button.svelte b/src/svelte/components/button.svelte
@@ -33,6 +33,9 @@
   export let fill = false;
   export let fillMd = false;
   export let fillIos = false;
+  export let tonal = false;
+  export let tonalMd = false;
+  export let tonalIos = false;
   export let large = false;
   export let largeMd = false;
   export let largeIos = false;
@@ -84,6 +87,9 @@
       'button-fill': fill,
       'button-fill-ios': fillIos,
       'button-fill-md': fillMd,
+      'button-tonal': tonal,
+      'button-tonal-ios': tonalIos,
+      'button-tonal-md': tonalMd,
       'button-large': large,
       'button-large-ios': largeIos,
       'button-large-md': largeMd,

diff --git a/src/vue/components/button.vue b/src/vue/components/button.vue
@@ -58,6 +58,9 @@ export default {
     fill: Boolean,
     fillMd: Boolean,
     fillIos: Boolean,
+    tonal: Boolean,
+    tonalMd: Boolean,
+    tonalIos: Boolean,
     large: Boolean,
     largeMd: Boolean,
     largeIos: Boolean,
@@ -123,6 +126,9 @@ export default {
         fill,
         fillMd,
         fillIos,
+        tonal,
+        tonalMd,
+        tonalIos,
         large,
         largeMd,
         largeIos,
@@ -153,6 +159,9 @@ export default {
           'button-fill': fill,
           'button-fill-ios': fillIos,
           'button-fill-md': fillMd,
+          'button-tonal': tonal,
+          'button-tonal-ios': tonalIos,
+          'button-tonal-md': tonalMd,
           'button-large': large,
           'button-large-ios': largeIos,
           'button-large-md': largeMd,