feat(fab): m3 styles

konstaui · Aug 11, 2022 · 3c069a3 · 3c069a3
1 parent 33cc2bc
commit 3c069a3
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/src/react/components/Fab.jsx b/src/react/components/Fab.jsx
@@ -2,6 +2,7 @@ import React, { useRef, useImperativeHandle, forwardRef } from 'react';
 import { useTheme } from '../shared/use-theme.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
 import { useTouchRipple } from '../shared/use-touch-ripple.js';
+import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { FabClasses } from '../../shared/classes/FabClasses.js';
 import { FabColors } from '../../shared/colors/FabColors.js';
 
@@ -42,10 +43,11 @@ const Fab = forwardRef((props, ref) => {
 
   const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
+  const dark = useDarkClasses();
 
   useTouchRipple(rippleElRef, theme === 'material' && touchRipple);
 
-  const colors = FabColors(colorsProp);
+  const colors = FabColors(colorsProp, dark);
 
   const c = themeClasses(FabClasses(props, colors), className);
 

diff --git a/src/shared/classes/FabClasses.js b/src/shared/classes/FabClasses.js
@@ -1,9 +1,9 @@
 export const FabClasses = (props, colors) => {
   return {
     base: {
-      common: `${colors.bg} ${colors.activeBg} ${colors.text} flex items-center justify-center space-x-2 cursor-pointer overflow-hidden select-none`,
-      ios: `h-12 duration-100 rounded-full shadow-lg`,
-      material: `duration-300 touch-ripple-white rounded-2xl shadow`,
+      common: `flex items-center justify-center space-x-2 cursor-pointer overflow-hidden select-none`,
+      ios: `h-12 duration-100 rounded-full shadow-lg ${colors.bgIos} ${colors.activeBgIos} ${colors.textIos}`,
+      material: `duration-300 rounded-2xl shadow ${colors.bgMaterial} ${colors.activeBgMaterial} ${colors.textMaterial} ${colors.touchRipple}`,
       iconOnly: {
         ios: 'w-12',
         material: 'w-14 h-14',

diff --git a/src/shared/colors/FabColors.js b/src/shared/colors/FabColors.js
@@ -2,9 +2,19 @@ import { cls } from '../cls.js';
 
 export const FabColors = (colorsProp = {}, dark) => {
   return {
-    bg: 'bg-primary',
-    activeBg: 'active:bg-primary-dark',
-    text: 'text-white',
+    bgIos: 'bg-primary',
+    bgMaterial: cls(
+      'bg-md-light-primary-container',
+      dark('dark:bg-md-dark-primary-container')
+    ),
+    activeBgIos: 'active:bg-primary-dark',
+    activeBgMaterial: '',
+    textIos: 'text-white',
+    textMaterial: cls(
+      'text-md-light-on-primary-container',
+      dark('dark:text-md-dark-on-primary-container')
+    ),
+    touchRipple: cls('touch-ripple-primary', dark('dark:touch-ripple-white')),
     ...colorsProp,
   };
 };
diff --git a/src/svelte/components/Fab.svelte b/src/svelte/components/Fab.svelte
@@ -1,6 +1,7 @@
 <script>
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { FabClasses } from '../../shared/classes/FabClasses.js';
   import { FabColors } from '../../shared/colors/FabColors.js';
 
@@ -20,9 +21,11 @@
 
   const rippleEl = { current: null };
 
+  const dark = useDarkClasses();
+
   $: useTouchRipple(rippleEl, touchRipple);
 
-  $: colors = FabColors(colorsProp);
+  $: colors = FabColors(colorsProp, dark);
 
   $: c = useThemeClasses(
     { ios, material },

diff --git a/src/vue/components/Fab.vue b/src/vue/components/Fab.vue
@@ -25,6 +25,7 @@
   import { FabColors } from '../../shared/colors/FabColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-fab',
@@ -53,7 +54,9 @@
       const rippleElRef = ref(null);
       useTouchRipple(rippleElRef, props);
 
-      const colors = computed(() => FabColors(props.colors || {}));
+      const colors = computed(() =>
+        FabColors(props.colors || {}, useDarkClasses)
+      );
 
       const c = useThemeClasses(props, () => FabClasses(props, colors.value));
       return {