feat(progressbar): m3 styles

konstaui · Aug 11, 2022 · 05a210c · 05a210c
1 parent b6ed24e
commit 05a210c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/src/react/components/Progressbar.jsx b/src/react/components/Progressbar.jsx
@@ -2,6 +2,7 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { ProgressbarClasses } from '../../shared/classes/ProgressbarClasses.js';
 import { ProgressbarColors } from '../../shared/colors/ProgressbarColors.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useDarkClasses } from '../shared/use-dark-classes.js';
 
 const Progressbar = forwardRef((props, ref) => {
   const {
@@ -34,8 +35,8 @@ const Progressbar = forwardRef((props, ref) => {
   };
 
   const themeClasses = useThemeClasses({ ios, material });
-
-  const colors = ProgressbarColors(colorsProp);
+  const dark = useDarkClasses();
+  const colors = ProgressbarColors(colorsProp, dark);
 
   const c = themeClasses(ProgressbarClasses(colors), className);
 

diff --git a/src/shared/classes/ProgressbarClasses.js b/src/shared/classes/ProgressbarClasses.js
@@ -3,8 +3,12 @@ export const ProgressbarClasses = (colors) => {
     base: {
       common: `block h-1 bg-opacity-30 overflow-hidden`,
       ios: `bg-black rounded-full`,
-      material: colors.bg,
+      material: colors.bgMaterial,
+    },
+    inner: {
+      common: `block duration-200 w-full h-full`,
+      ios: colors.bgIos,
+      material: colors.bgMaterial,
     },
-    inner: `block ${colors.bg} duration-200 w-full h-full`,
   };
 };
diff --git a/src/shared/colors/ProgressbarColors.js b/src/shared/colors/ProgressbarColors.js
@@ -2,7 +2,8 @@ import { cls } from '../cls.js';
 
 export const ProgressbarColors = (colorsProp = {}, dark) => {
   return {
-    bg: 'bg-primary',
+    bgIos: 'bg-primary',
+    bgMaterial: cls('bg-md-light-primary', dark('dark:md-dark-primary')),
     ...colorsProp,
   };
 };
diff --git a/src/svelte/components/Progressbar.svelte b/src/svelte/components/Progressbar.svelte
@@ -2,6 +2,7 @@
   import { ProgressbarClasses } from '../../shared/classes/ProgressbarClasses.js';
   import { ProgressbarColors } from '../../shared/colors/ProgressbarColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   let className = undefined;
   export { className as class };
@@ -12,7 +13,9 @@
 
   export let progress = 0;
 
-  $: colors = ProgressbarColors(colorsProp);
+  const dark = useDarkClasses();
+
+  $: colors = ProgressbarColors(colorsProp, dark);
 
   $: c = useThemeClasses(
     { ios, material },

diff --git a/src/vue/components/Progressbar.vue b/src/vue/components/Progressbar.vue
@@ -12,6 +12,7 @@
   import { ProgressbarClasses } from '../../shared/classes/ProgressbarClasses.js';
   import { ProgressbarColors } from '../../shared/colors/ProgressbarColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-progressbar',
@@ -37,7 +38,9 @@
       },
     },
     setup(props) {
-      const colors = computed(() => ProgressbarColors(props.colors || {}));
+      const colors = computed(() =>
+        ProgressbarColors(props.colors || {}, useDarkClasses)
+      );
 
       const c = useThemeClasses(props, () => ProgressbarClasses(colors.value));