Implementing the old createStyles API in mantine v7

[StringKe]

// utils/styles.ts

import { cache } from '@emotion/css';
import { useMantineTheme } from '@mantine/core';
import { get } from 'lodash';
import { createTss } from 'tss-react';

import type { MantineTheme } from '@mantine/core';

import { devSimpleError } from '~/utils/dev-simple-error';

export declare type AppTheme = MantineTheme & {
    color(shade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number): string | undefined;
    color(
        type: keyof MantineTheme['colors'],
        shade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number,
    ): string | undefined;
    rgba(color: string, opacity: number): string;
    gradient: (angle: number, ...colors: string[]) => string;

    [key: string]: unknown;
};

function hexToRgb(hex: string) {
    const bigint = parseInt(hex.replace('#', ''), 16);
    return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}

function useContext() {
    const theme = useMantineTheme();
    return {
        ...theme,
        color: (...args) => {
            let type = 'blue';
            let shade: number;
            if (typeof args[0] === 'string') {
                type = args[0];
                shade = args[1] as number;
            } else {
                shade = args[0] as number;
            }

            if (shade > 10) {
                shade = shade / 100;
            }
            return get(theme, `colors.${type}[${shade}]`) as unknown as string | undefined;
        },
        rgba: (color, opacity) => {
            if (color.startsWith('#')) {
                const [r, g, b] = hexToRgb(color);
                return `rgba(${r}, ${g}, ${b}, ${opacity})`;
            } else if (color.startsWith('rgb') && !color.startsWith('rgba')) {
                return color.replace(')', `, ${opacity})`).replace('rgb', 'rgba');
            } else if (color.startsWith('rgba')) {
                return color.replace(/[^,]+(?=\))/, `${opacity}`);
            }
            devSimpleError(true, 'Color is not valid. Please use hex, rgb or rgba color');
            return color;
        },
        gradient: (angle, ...colors) => {
            return `linear-gradient(${angle}deg, ${colors.join(', ')})`;
        },
    } as AppTheme;
}

export const { tss } = createTss<AppTheme, Record<string, unknown>>({ useContext, cache });

export const createStyles = tss.create.bind(tss);

// some page
const useStyles = createStyles((theme) => {
    console.log('theme', theme);
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '100vh',
        },
    };
});

export const Page: AppPage = () => {
    const { classes, cx } = useStyles();
    return (
        <div className={classes.root}>
            <Container>123</Container>
        </div>
    );
};

Related items:

1. https://github.com/garronej/tss-react
2. https://emotion.sh/docs/composition
3. https://mantine.dev

[garronej]

Thanks for sharing your solution!