Skip to content

Commit

Permalink
feat(block-title): m3 styles and colors
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 11, 2022
1 parent 96c4385 commit 58008db
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 4 deletions.
4 changes: 3 additions & 1 deletion src/react/components/BlockTitle.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { BlockTitleClasses } from '../../shared/classes/BlockTitleClasses.js';
import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';

const BlockTitle = forwardRef((props, ref) => {
const {
Expand Down Expand Up @@ -34,8 +35,9 @@ const BlockTitle = forwardRef((props, ref) => {
};

const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const colors = BlockTitleColors(colorsProp);
const colors = BlockTitleColors(colorsProp, dark);

const c = themeClasses(
BlockTitleClasses({ ...props, withBlock }, colors),
Expand Down
5 changes: 4 additions & 1 deletion src/shared/colors/BlockTitleColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ import { cls } from '../cls.js';
export const BlockTitleColors = (colorsProp = {}, dark) => {
return {
textIos: '',
textMaterial: 'text-primary',
textMaterial: cls(
'text-md-light-primary',
dark('dark:text-md-dark-primary')
),
...colorsProp,
};
};
4 changes: 3 additions & 1 deletion src/svelte/components/BlockTitle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { BlockTitleClasses } from '../../shared/classes/BlockTitleClasses.js';
import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
let className = undefined;
export { className as class };
Expand All @@ -11,8 +12,9 @@
export let material = undefined;
export let withBlock = true;
const dark = useDarkClasses();
$: colors = BlockTitleColors(colorsProp);
$: colors = BlockTitleColors(colorsProp, dark);
$: c = useThemeClasses(
{ ios, material },
Expand Down
5 changes: 4 additions & 1 deletion src/vue/components/BlockTitle.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { BlockTitleClasses } from '../../shared/classes/BlockTitleClasses.js';
import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
export default {
name: 'k-block-title',
Expand All @@ -33,7 +34,9 @@
},
},
setup(props) {
const colors = computed(() => BlockTitleColors(props.colors || {}));
const colors = computed(() =>
BlockTitleColors(props.colors || {}, useDarkClasses)
);
const c = useThemeClasses(props, () => BlockTitleClasses(props, colors));
return {
c,
Expand Down

0 comments on commit 58008db

Please sign in to comment.