feat(block-title): tweak styles to match material 3

src/react/components/BlockTitle.jsx

@@ -6,6 +6,8 @@ const BlockTitle = forwardRef((props, ref) => {
   const {
     component = 'div',
     className,
+    colors: colorsProp,
+
     withBlock = true,
 
     ios,
@@ -32,7 +34,16 @@ const BlockTitle = forwardRef((props, ref) => {
 
   const themeClasses = useThemeClasses({ ios, material });
 
-  const c = themeClasses(BlockTitleClasses({ ...props, withBlock }), className);
+  const colors = {
+    textIos: '',
+    textMaterial: 'text-primary',
+    ...colorsProp,
+  };
+
+  const c = themeClasses(
+    BlockTitleClasses({ ...props, withBlock }, colors),
+    className
+  );
 
   return (
     <Component ref={elRef} className={c.base} {...attrs}>

src/shared/classes/BlockTitleClasses.js

@@ -1,12 +1,12 @@
-export const BlockTitleClasses = (props) => {
+export const BlockTitleClasses = (props, colors) => {
   const { withBlock } = props;
   return {
     base: {
       common: `pl-4-safe pr-4-safe mt-8 flex justify-between items-center ${
         withBlock ? '-mb-6' : 'mb-2'
       }`,
-      ios: `font-semibold`,
-      material: `text-sm font-medium text-primary`,
+      ios: `font-semibold ${colors.textIos}`,
+      material: `text-sm font-medium ${colors.textMaterial}`,
     },
   };
 };

src/svelte/components/BlockTitle.svelte

@@ -4,14 +4,22 @@
 
   let className = undefined;
   export { className as class };
+  let colorsProp = undefined;
+  export { colorsProp as colors };
   export let ios = undefined;
   export let material = undefined;
 
   export let withBlock = true;
 
+  $: colors = {
+    textIos: '',
+    textMaterial: 'text-primary',
+    ...colorsProp,
+  };
+
   $: c = useThemeClasses(
     { ios, material },
-    BlockTitleClasses({ withBlock }),
+    BlockTitleClasses({ withBlock }, colors),
     className,
     (v) => (c = v)
   );

src/vue/components/BlockTitle.vue

@@ -4,6 +4,7 @@
   </component>
 </template>
 <script>
+  import { computed } from 'vue';
   import { BlockTitleClasses } from '../../shared/classes/BlockTitleClasses.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
@@ -14,6 +15,9 @@
         type: String,
         default: 'span',
       },
+      colors: {
+        type: Object,
+      },
       ios: {
         type: Boolean,
         default: undefined,
@@ -28,7 +32,12 @@
       },
     },
     setup(props) {
-      const c = useThemeClasses(props, () => BlockTitleClasses(props));
+      const colors = computed(() => ({
+        textIos: '',
+        textMaterial: 'text-primary',
+        ...(props.colors || {}),
+      }));
+      const c = useThemeClasses(props, () => BlockTitleClasses(props, colors));
       return {
         c,
       };