feat(navbar): m3 styles and colors

src/react/components/Navbar.jsx

@@ -1,4 +1,5 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { useTheme } from '../shared/use-theme.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { NavbarClasses } from '../../shared/classes/NavbarClasses.js';
@@ -17,12 +18,17 @@ const Navbar = forwardRef((props, ref) => {
     rightClassName = '',
     subnavbarClassName = '',
 
+    centerTitle,
+
     colors: colorsProp,
     translucent = true,
     hairlines = true,
 
-    fontSizeIos = 'text-navbar-ios',
-    fontSizeMaterial = 'text-navbar-material',
+    fontSizeIos = 'text-[17px]',
+    fontSizeMaterial = 'text-[16px]',
+
+    titleFontSizeIos = 'text-[17px]',
+    titleFontSizeMaterial = 'text-[22px]',
 
     left,
     title,
@@ -43,6 +49,7 @@ const Navbar = forwardRef((props, ref) => {
 
   const Component = component;
 
+  const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
@@ -56,10 +63,14 @@ const Navbar = forwardRef((props, ref) => {
     NavbarClasses(
       {
         ...props,
+        centerTitle:
+          typeof centerTitle === 'undefined' ? theme === 'ios' : centerTitle,
         translucent,
         hairlines,
         fontSizeIos,
         fontSizeMaterial,
+        titleFontSizeIos,
+        titleFontSizeMaterial,
         bgClassName,
         innerClassName,
         leftClassName,

src/shared/classes/NavbarClasses.js

@@ -9,6 +9,8 @@ export const NavbarClasses = (props, colors, classes) => {
     right,
     fontSizeIos,
     fontSizeMaterial,
+    titleFontSizeIos,
+    titleFontSizeMaterial,
     bgClassName = '',
     bgClass = '',
     subnavbarClassName = '',
@@ -23,6 +25,7 @@ export const NavbarClasses = (props, colors, classes) => {
     subtitleClass = '',
     rightClassName = '',
     rightClass = '',
+    centerTitle,
   } = props;
   return {
     base: {
@@ -75,10 +78,19 @@ export const NavbarClasses = (props, colors, classes) => {
     title: {
       common: cls(
         `whitespace-nowrap leading-tight`,
-        titleClassName || titleClass
+        titleClassName || titleClass,
+        centerTitle
+          ? `absolute top-1/2 left-1/2 transform-gpu -translate-x-1/2 -translate-y-1/2 text-center`
+          : 'text-left'
+      ),
+      ios: cls(
+        `${colors.titleIos} ${titleFontSizeIos} font-semibold`,
+        !centerTitle && 'first:mx-2'
+      ),
+      material: cls(
+        `${colors.titleMaterial} ${titleFontSizeMaterial} font-normal`,
+        !centerTitle && 'first:mx-4'
       ),
-      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(

src/shared/colors/NavbarColors.js

@@ -5,7 +5,10 @@ export const NavbarColors = (colorsProp, dark) => {
     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')),
     titleIos: cls('text-black', dark('dark:text-white')),
-    titleMaterial: cls('text-black', dark('dark:text-white')),
+    titleMaterial: cls(
+      'text-md-light-on-surface',
+      dark('dark:text-md-dark-on-surface')
+    ),
     ...colorsProp,
   };
 };

src/svelte/components/Navbar.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { NavbarClasses } from '../../shared/classes/NavbarClasses.js';
@@ -19,9 +20,13 @@
   export { colorsProp as colors };
   export let translucent = true;
   export let hairlines = true;
+  export let centerTitle = undefined;
 
-  export let fontSizeIos = 'text-navbar-ios';
-  export let fontSizeMaterial = 'text-navbar-material';
+  export let fontSizeIos = 'text-navbar-[17px]';
+  export let fontSizeMaterial = 'text-navbar-[16px';
+
+  export let titleFontSizeIos = 'text-navbar-[17px]';
+  export let titleFontSizeMaterial = 'text-navbar-[16px';
 
   export let title = undefined;
   export let subtitle = undefined;
@@ -32,6 +37,9 @@
 
   $: colors = NavbarColors(colorsProp, dark);
 
+  let theme;
+  theme = useTheme({}, (v) => (theme = v));
+
   $: c = useThemeClasses(
     { ios, material },
     NavbarClasses(
@@ -47,6 +55,10 @@
         hairlines,
         fontSizeIos,
         fontSizeMaterial,
+        titleFontSizeIos,
+        titleFontSizeMaterial,
+        centerTitle:
+          typeof centerTitle === 'undeifned' ? theme === 'ios' : centerTitle,
       },
       colors,
       className

src/types/Navbar.d.ts

@@ -38,17 +38,31 @@ interface Props {
   /**
    * Tailwind CSS class for font size in iOS theme
    *
-   * @default 'text-navbar-ios'
+   * @default 'text-[17px]'
    */
   fontSizeIos?: string;
 
   /**
    * Tailwind CSS class for font size in Material theme
    *
-   * @default 'text-navbar-material'
+   * @default 'text-[16px]'
    */
   fontSizeMaterial?: string;
 
+  /**
+   * Tailwind CSS class for navbar title font size in iOS theme
+   *
+   * @default 'text-[17px]'
+   */
+  titleFontSizeIos?: string;
+
+  /**
+   * Tailwind CSS class for navbar title font size in Material theme
+   *
+   * @default 'text-[22px]'
+   */
+  titleFontSizeMaterial?: string;
+
   /**
    * Additional class to add on Navbar's "background" element
    */
@@ -90,6 +104,13 @@ interface Props {
    */
   hairlines?: boolean;
 
+  /**
+   * Makes centered navbar title. If not specified then it set it to center in iOS theme
+   *
+   * @default undefined
+   */
+  centerTitle?: boolean;
+
   /**
    * Content of the Navbar's "left" area
    */

src/vue/components/Navbar.vue

@@ -25,6 +25,7 @@
 <script>
   import { computed } from 'vue';
 
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { NavbarClasses } from '../../shared/classes/NavbarClasses.js';
@@ -56,23 +57,37 @@
       rightClass: { type: String, default: '' },
       subnavbarClass: { type: String, default: '' },
 
+      centerTitle: { type: Boolean, default: undefined },
+
       translucent: { type: Boolean, default: true },
       hairlines: { type: Boolean, default: true },
 
-      fontSizeIos: { type: String, default: 'text-navbar-ios' },
-      fontSizeMaterial: { type: String, default: 'text-navbar-material' },
+      fontSizeIos: { type: String, default: 'text-[17px]' },
+      fontSizeMaterial: { type: String, default: 'text-[16px]' },
+
+      titleFontSizeIos: { type: String, default: 'text-[17px]' },
+      titleFontSizeMaterial: { type: String, default: 'text-[22px]' },
 
       title: String,
       subtitle: String,
     },
     setup(props, ctx) {
+      const theme = useTheme(props);
       const colors = computed(() =>
         NavbarColors(props.colors || {}, useDarkClasses)
       );
 
       const c = useThemeClasses(props, () =>
         NavbarClasses(
-          { ...props, left: ctx.slots.left, right: ctx.slots.right },
+          {
+            ...props,
+            left: ctx.slots.left,
+            right: ctx.slots.right,
+            centerTitle:
+              typeof props.centerTitle === 'undefined'
+                ? theme.value === 'ios'
+                : props.centerTitle,
+          },
           colors.value,
           ctx.attrs.class
         )