feat(navbar): split title for ios and material colors

konstaui · Aug 10, 2022 · c264ac3 · c264ac3
1 parent 1fbd280
commit c264ac3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/src/react/components/Navbar.jsx b/src/react/components/Navbar.jsx
@@ -52,8 +52,9 @@ const Navbar = forwardRef((props, ref) => {
 
   const colors = {
     bgIos: cls('bg-bars-ios-light', dark('dark:bg-bars-ios-dark')),
-    bgMaterial: cls('bg-md-light-surface-2', dark('dark:bg-md-dark-surface-2')),
-    title: cls('text-black', dark('dark:text-white')),
+    bgMaterial: cls('bg-md-surface-2-light', dark('dark:bg-md-surface-2-dark')),
+    titleIos: cls('text-black', dark('dark:text-white')),
+    titleMaterial: cls('text-black', dark('dark:text-white')),
     ...colorsProp,
   };
 

diff --git a/src/shared/classes/NavbarClasses.js b/src/shared/classes/NavbarClasses.js
@@ -74,11 +74,11 @@ export const NavbarClasses = (props, colors, classes) => {
     },
     title: {
       common: cls(
-        `${colors.title} whitespace-nowrap leading-tight`,
+        `whitespace-nowrap leading-tight`,
         titleClassName || titleClass
       ),
-      ios: 'font-semibold absolute top-1/2 left-1/2 transform-gpu -translate-x-1/2 -translate-y-1/2 text-center',
-      material: 'font-normal mx-4 text-left',
+      ios: `${colors.titleIos} font-semibold absolute top-1/2 left-1/2 transform-gpu -translate-x-1/2 -translate-y-1/2 text-center`,
+      material: `${colors.titleMaterial} font-normal mx-4 text-left`,
     },
     subtitle: {
       common: cls(

diff --git a/src/svelte/components/Navbar.svelte b/src/svelte/components/Navbar.svelte
@@ -32,8 +32,9 @@
 
   $: colors = {
     bgIos: cls('bg-bars-ios-light', dark('dark:bg-bars-ios-dark')),
-    bgMaterial: cls('bg-md-light-surface-2', dark('dark:bg-md-dark-surface-2')),
-    title: cls('text-black', dark('dark:text-white')),
+    bgMaterial: cls('bg-md-surface-2-light', dark('dark:bg-md-surface-2-dark')),
+    titleIos: cls('text-black', dark('dark:text-white')),
+    titleMaterial: cls('text-black', dark('dark:text-white')),
     ...colorsProp,
   };
 

diff --git a/src/types/Navbar.d.ts b/src/types/Navbar.d.ts
@@ -16,17 +16,23 @@ interface Props {
      */
     bgIos?: string;
     /**
-     * Navbar bg color in iOS theme
+     * Navbar bg color in Material theme
      *
-     * @default 'bg-bars-material-light dark:bg-bars-material-dark'
+     * @default 'bg-md-surface-2-light dark:bg-md-surface-2-dark'
      */
     bgMaterial?: string;
     /**
-     * Title text color
+     * Title text color iOS theme
+     *
+     * @default 'text-black dark:text-white'
+     */
+    titleIos?: string;
+    /**
+     * Title text color in Material theme
      *
      * @default 'text-black dark:text-white'
      */
-    title?: string;
+    titleMaterial?: string;
   };
 
   /**

diff --git a/src/vue/components/Navbar.vue b/src/vue/components/Navbar.vue
@@ -72,10 +72,11 @@
           useDarkClasses('dark:bg-bars-ios-dark')
         ),
         bgMaterial: cls(
-          'bg-md-light-surface-2',
-          useDarkClasses('dark:bg-md-dark-surface-2')
+          'bg-md-surface-2-light',
+          useDarkClasses('dark:bg-md-surface-2-dark')
         ),
-        title: cls('text-black', useDarkClasses('dark:text-white')),
+        titleIos: cls('text-black', useDarkClasses('dark:text-white')),
+        titleMaterial: cls('text-black', useDarkClasses('dark:text-white')),
         ...(props.colors || {}),
       }));