feat(page): add page colors prop

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

Hide file tree

Showing 5 changed files with 63 additions and 9 deletions.
diff --git a/src/react/components/Page.jsx b/src/react/components/Page.jsx
@@ -1,12 +1,14 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { PageClasses } from '../../shared/classes/PageClasses.js';
+import { cls } from '../../shared/cls.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
 
 const Page = forwardRef((props, ref) => {
   const {
     component = 'div',
     className,
+    colors: colorsProp,
 
     ios,
     material,
@@ -33,7 +35,16 @@ const Page = forwardRef((props, ref) => {
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
-  const c = themeClasses(PageClasses(props, className, dark), className);
+  const colors = {
+    bgIos: cls('bg-page-ios-light', dark('dark:bg-page-ios-dark')),
+    bgMaterial: cls(
+      'bg-page-material-light',
+      dark('dark:bg-page-material-dark')
+    ),
+    ...colorsProp,
+  };
+
+  const c = themeClasses(PageClasses(props, colors, className), className);
 
   return (
     <Component ref={elRef} className={c.base} {...attrs}>

diff --git a/src/shared/classes/PageClasses.js b/src/shared/classes/PageClasses.js
@@ -1,18 +1,15 @@
 import { cls } from '../cls.js';
 import { positionClass } from '../position-class.js';
 
-export const PageClasses = (props, classes, darkClasses) => {
+export const PageClasses = (props, colors, classes) => {
   return {
     base: {
       common: cls(
         'h-full w-full left-0 top-0 overflow-auto',
         positionClass('absolute', classes)
       ),
-      ios: cls('bg-page-ios-light', darkClasses('dark:bg-page-ios-dark')),
-      material: cls(
-        'bg-page-material-light',
-        darkClasses('dark:bg-page-material-dark')
-      ),
+      ios: colors.bgIos,
+      material: colors.bgMaterial,
     },
   };
 };
diff --git a/src/svelte/components/Page.svelte b/src/svelte/components/Page.svelte
@@ -6,16 +6,28 @@
   let className = undefined;
   export { className as class };
 
+  let colorsProp = undefined;
+  export { colorsProp as colors };
+
   export let ios = undefined;
   export let material = undefined;
 
   export let component = 'div';
 
   const dark = useDarkClasses();
 
+  $: colors = {
+    bgIos: cls('bg-page-ios-light', dark('dark:bg-page-ios-dark')),
+    bgMaterial: cls(
+      'bg-page-material-light',
+      dark('dark:bg-page-material-dark')
+    ),
+    ...colorsProp,
+  };
+
   $: c = useThemeClasses(
     { ios, material },
-    PageClasses({}, className, dark),
+    PageClasses({}, className, colors),
     className,
     (v) => (c = v)
   );

diff --git a/src/types/Page.d.ts b/src/types/Page.d.ts
@@ -5,4 +5,22 @@ interface Props {
    * @default 'div'
    */
   component?: string;
+
+  /**
+   * Object with Tailwind CSS colors classes
+   * */
+  colors?: {
+    /**
+     * Page bg color in iOS theme
+     *
+     * @default 'bg-page-ios-light dark:bg-page-ios-dark'
+     */
+    bgIos?: string;
+    /**
+     * Page bg color in Material theme
+     *
+     * @default 'bg-page-material-light dark:bg-page-material-dark'
+     */
+    bgMaterial?: string;
+  };
 }
diff --git a/src/vue/components/Page.vue b/src/vue/components/Page.vue
@@ -4,7 +4,9 @@
   </component>
 </template>
 <script>
+  import { computed } from 'vue';
   import { PageClasses } from '../../shared/classes/PageClasses.js';
+  import { cls } from '../../shared/cls.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
@@ -23,10 +25,24 @@
         type: Boolean,
         default: undefined,
       },
+      colors: {
+        type: Object,
+      },
     },
     setup(props, ctx) {
+      const colors = computed(() => ({
+        bgIos: cls(
+          'bg-page-ios-light',
+          useDarkClasses('dark:bg-page-ios-dark')
+        ),
+        bgMaterial: cls(
+          'bg-page-material-light',
+          useDarkClasses('dark:bg-page-material-dark')
+        ),
+        ...(props.colors || {}),
+      }));
       const c = useThemeClasses(props, () =>
-        PageClasses(props, ctx.attrs.class, useDarkClasses)
+        PageClasses(props, ctx.attrs.class, colors)
       );
 
       return {