feat: BlockFooter and BlockHeader colors

konstaui · Aug 12, 2022 · 50ecc77 · 50ecc77
1 parent 5615e12
commit 50ecc77
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 12 deletions.
diff --git a/src/react/components/BlockFooter.jsx b/src/react/components/BlockFooter.jsx
@@ -1,11 +1,14 @@
 import React, { useRef, useImperativeHandle, forwardRef } from 'react';
 import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
+import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useDarkClasses } from '../shared/use-dark-classes.js';
 
 const BlockFooter = forwardRef((props, ref) => {
   const {
     component = 'div',
     className,
+    colors: colorsProp,
 
     ios,
     material,
@@ -30,8 +33,11 @@ const BlockFooter = forwardRef((props, ref) => {
   };
 
   const themeClasses = useThemeClasses({ ios, material });
+  const dark = useDarkClasses();
 
-  const c = themeClasses(BlockFooterClasses(), className);
+  const colors = BlockFooterColors(colorsProp, dark);
+
+  const c = themeClasses(BlockFooterClasses(props, colors), className);
 
   return (
     <Component ref={elRef} className={c.base} {...attrs}>

diff --git a/src/react/components/BlockHeader.jsx b/src/react/components/BlockHeader.jsx
@@ -1,11 +1,14 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
+import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useDarkClasses } from '../shared/use-dark-classes.js';
 
 const BlockHeader = forwardRef((props, ref) => {
   const {
     component = 'div',
     className,
+    colors: colorsProp,
 
     ios,
     material,
@@ -30,8 +33,11 @@ const BlockHeader = forwardRef((props, ref) => {
   };
 
   const themeClasses = useThemeClasses({ ios, material });
+  const dark = useDarkClasses();
 
-  const c = themeClasses(BlockHeaderClasses(), className);
+  const colors = BlockHeaderColors(colorsProp, dark);
+
+  const c = themeClasses(BlockHeaderClasses(props, colors), className);
 
   return (
     <Component ref={elRef} className={c.base} {...attrs}>

diff --git a/src/shared/classes/BlockFooterClasses.js b/src/shared/classes/BlockFooterClasses.js
@@ -1,5 +1,9 @@
-export const BlockFooterClasses = () => {
+export const BlockFooterClasses = (props, colors) => {
   return {
-    base: `pl-4-safe pr-4-safe mb-8 flex items-center -mt-6 text-opacity-55 text-black text-sm`,
+    base: {
+      common: `pl-4-safe pr-4-safe mb-8 flex items-center -mt-6 text-sm`,
+      ios: colors.textIos,
+      material: colors.textMaterial,
+    },
   };
 };
diff --git a/src/shared/classes/BlockHeaderClasses.js b/src/shared/classes/BlockHeaderClasses.js
@@ -1,5 +1,9 @@
-export const BlockHeaderClasses = () => {
+export const BlockHeaderClasses = (props, colors) => {
   return {
-    base: `pl-4-safe pr-4-safe mt-8 flex items-center -mb-6 text-opacity-55 text-black text-sm`,
+    base: {
+      common: `pl-4-safe pr-4-safe mt-8 flex items-center -mb-6 text-sm`,
+      ios: colors.textIos,
+      material: colors.textMaterial,
+    },
   };
 };
diff --git a/src/shared/colors/BlockFooterColors.js b/src/shared/colors/BlockFooterColors.js
@@ -2,6 +2,11 @@ import { cls } from '../cls.js';
 
 export const BlockFooterColors = (colorsProp = {}, dark) => {
   return {
+    textIos: cls('text-black', dark('text-white')),
+    textMaterial: cls(
+      'text-md-light-on-surface-variant',
+      dark('dark:text-md-dark-on-surface-variant')
+    ),
     ...colorsProp,
   };
-};
+};
diff --git a/src/shared/colors/BlockHeaderColors.js b/src/shared/colors/BlockHeaderColors.js
@@ -2,6 +2,11 @@ import { cls } from '../cls.js';
 
 export const BlockHeaderColors = (colorsProp = {}, dark) => {
   return {
+    textIos: cls('text-black', dark('text-white')),
+    textMaterial: cls(
+      'text-md-light-on-surface-variant',
+      dark('dark:text-md-dark-on-surface-variant')
+    ),
     ...colorsProp,
   };
-};
+};
diff --git a/src/svelte/components/BlockFooter.svelte b/src/svelte/components/BlockFooter.svelte
@@ -1,15 +1,23 @@
 <script>
   import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
+  import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   let className = undefined;
   export { className as class };
+  let colorsProp = undefined;
+  export { colorsProp as colors };
   export let ios = undefined;
   export let material = undefined;
 
+  const dark = useDarkClasses();
+
+  $: colors = BlockFooterColors(colorsProp, dark);
+
   $: c = useThemeClasses(
     { ios, material },
-    BlockFooterClasses(),
+    BlockFooterClasses({}, colors),
     className,
     (v) => (c = v)
   );

diff --git a/src/svelte/components/BlockHeader.svelte b/src/svelte/components/BlockHeader.svelte
@@ -1,15 +1,23 @@
 <script>
   import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
+  import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   let className = undefined;
   export { className as class };
+  let colorsProp = undefined;
+  export { colorsProp as colors };
   export let ios = undefined;
   export let material = undefined;
 
+  const dark = useDarkClasses();
+
+  $: colors = BlockHeaderColors(colorsProp, dark);
+
   $: c = useThemeClasses(
     { ios, material },
-    BlockHeaderClasses(),
+    BlockHeaderClasses({}, colors),
     className,
     (v) => (c = v)
   );

diff --git a/src/vue/components/BlockFooter.vue b/src/vue/components/BlockFooter.vue
@@ -4,8 +4,11 @@
   </component>
 </template>
 <script>
+  import { computed } from 'vue';
   import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
+  import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-footer',
@@ -14,6 +17,9 @@
         type: String,
         default: 'div',
       },
+      colors: {
+        type: Object,
+      },
       ios: {
         type: Boolean,
         default: undefined,
@@ -24,7 +30,12 @@
       },
     },
     setup(props) {
-      const c = useThemeClasses(props, () => BlockFooterClasses());
+      const colors = computed(() =>
+        BlockFooterColors(props.colors || {}, useDarkClasses)
+      );
+      const c = useThemeClasses(props, () =>
+        BlockFooterClasses(props, colors.value)
+      );
       return {
         c,
       };

diff --git a/src/vue/components/BlockHeader.vue b/src/vue/components/BlockHeader.vue
@@ -4,8 +4,11 @@
   </component>
 </template>
 <script>
+  import { computed } from 'vue';
   import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
+  import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-header',
@@ -14,6 +17,9 @@
         type: String,
         default: 'div',
       },
+      colors: {
+        type: Object,
+      },
       ios: {
         type: Boolean,
         default: undefined,
@@ -24,7 +30,13 @@
       },
     },
     setup(props) {
-      const c = useThemeClasses(props, () => BlockHeaderClasses());
+      const colors = computed(() =>
+        BlockHeaderColors(props.colors || {}, useDarkClasses)
+      );
+
+      const c = useThemeClasses(props, () =>
+        BlockHeaderClasses(props, colors.value)
+      );
       return {
         c,
       };