Skip to content

Commit

Permalink
feat(preloader): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 12, 2022
1 parent 6f4fd4b commit 12842d8
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 8 deletions.
5 changes: 3 additions & 2 deletions src/react/components/Preloader.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
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 PreloaderIOS from './icons/PreloaderIOS.jsx';
import PreloaderMaterial from './icons/PreloaderMaterial.jsx';
Expand Down Expand Up @@ -39,8 +40,8 @@ const Preloader = forwardRef((props, ref) => {

const theme = useTheme({ ios, material });
const themeClasses = useThemeClasses({ ios, material });

const colors = PreloaderColors(colorsProp);
const dark = useDarkClasses();
const colors = PreloaderColors(colorsProp, dark);

const SVGComponent = theme === 'ios' ? PreloaderIOS : PreloaderMaterial;

Expand Down
5 changes: 3 additions & 2 deletions src/shared/classes/PreloaderClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ export const PreloaderClasses = (props, colors, theme) => {
base: {
common: cls(
theme === 'ios' ? 'k-ios-preloader' : 'k-material-preloader',
`inline-block ${size} ${colors.icon}`
`inline-block ${size}`
),
material: `stroke-4`,
ios: colors.iconIos,
material: `stroke-4 ${colors.iconMaterial}`,
},
inner: {
common: `block w-full h-full`,
Expand Down
6 changes: 5 additions & 1 deletion src/shared/colors/PreloaderColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import { cls } from '../cls.js';

export const PreloaderColors = (colorsProp = {}, dark) => {
return {
icon: 'text-primary',
iconIos: 'text-primary',
iconMaterial: cls(
'text-md-light-primary',
dark('dark:text-md-dark-primary')
),
...colorsProp,
};
};
4 changes: 3 additions & 1 deletion src/svelte/components/Preloader.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<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 PreloaderIOS from './icons/PreloaderIOS.svelte';
import PreloaderMaterial from './icons/PreloaderMaterial.svelte';
Expand All @@ -20,7 +21,8 @@
theme = useTheme({ ios, material }, (v) => (theme = v));
$: colors = PreloaderColors(colorsProp);
const dark = useDarkClasses();
$: colors = PreloaderColors(colorsProp, dark);
$: c = useThemeClasses(
{ ios, material },
Expand Down
6 changes: 4 additions & 2 deletions src/vue/components/Preloader.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useDarkClasses } from '../shared/use-dark-classes';
<template>
<component :is="component" :class="c.base">
<span :class="c.inner">
Expand All @@ -11,6 +10,7 @@ import { useDarkClasses } from '../shared/use-dark-classes';
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 PreloaderIOS from './icons/PreloaderIOS.vue';
import PreloaderMaterial from './icons/PreloaderMaterial.vue';
Expand Down Expand Up @@ -43,7 +43,9 @@ import { useDarkClasses } from '../shared/use-dark-classes';
setup(props) {
const theme = useTheme(props);
const colors = computed(() => PreloaderColors(props.colors || {}));
const colors = computed(() =>
PreloaderColors(props.colors || {}, useDarkClasses)
);
const svgComponent = computed(() =>
theme.value === 'ios' ? PreloaderIOS : PreloaderMaterial
Expand Down

0 comments on commit 12842d8

Please sign in to comment.