135 lines
3.0 KiB
TypeScript
135 lines
3.0 KiB
TypeScript
/* eslint-disable @typescript-eslint/ban-types */
|
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
|
import { createStitches, DefaultThemeMap } from '@stitches/react';
|
|
import type { ConfigType } from '@stitches/react/types/config';
|
|
|
|
import { allToNegative } from '../utils';
|
|
import {
|
|
darkColors,
|
|
media as libMedia,
|
|
radii,
|
|
shadows,
|
|
sizes,
|
|
spacing,
|
|
typography,
|
|
zIndices,
|
|
} from './foundations';
|
|
import { utils as libUtils } from './utils';
|
|
|
|
export interface CreateDripStitchesConfig<
|
|
Prefix,
|
|
Media,
|
|
Theme,
|
|
ThemeMap,
|
|
Utils
|
|
> {
|
|
prefix?: ConfigType.Prefix<Prefix>;
|
|
media?: ConfigType.Media<Media>;
|
|
theme?: ConfigType.Theme<Theme>;
|
|
themeMap?: ConfigType.ThemeMap<ThemeMap>;
|
|
utils?: ConfigType.Utils<Utils>;
|
|
}
|
|
|
|
export const createDripStitches = <
|
|
Prefix extends string = '',
|
|
Media extends {} = {},
|
|
Theme extends {} = {},
|
|
ThemeMap extends {} = DefaultThemeMap,
|
|
Utils extends {} = {}
|
|
>(
|
|
config?: CreateDripStitchesConfig<Prefix, Media, Theme, ThemeMap, Utils>
|
|
) => {
|
|
const { prefix, theme, themeMap, utils, media } = config || {};
|
|
|
|
const _spacing = {
|
|
...allToNegative(spacing),
|
|
...spacing,
|
|
};
|
|
|
|
const _sizes = {
|
|
...allToNegative(sizes),
|
|
...sizes,
|
|
};
|
|
|
|
const { createTheme, ...otherStitches } = createStitches({
|
|
prefix: prefix || ('drip' as string),
|
|
media: {
|
|
...libMedia,
|
|
...(media || {}),
|
|
},
|
|
theme: {
|
|
colors: {
|
|
black: '#000000',
|
|
...darkColors, // TODO: replace with light colors once it's done the light mode
|
|
...(theme?.colors || {}),
|
|
},
|
|
borderWidths: {
|
|
default: '1px',
|
|
},
|
|
space: {
|
|
..._spacing,
|
|
...(theme?.space || {}),
|
|
},
|
|
sizes: {
|
|
..._sizes,
|
|
...(theme?.sizes || {}),
|
|
},
|
|
fontWeights: {
|
|
...typography.fontWeights,
|
|
...(theme?.fontWeights || {}),
|
|
},
|
|
fonts: {
|
|
...typography.fonts,
|
|
...(theme?.fonts || {}),
|
|
},
|
|
letterSpacings: {
|
|
...typography.letterSpacings,
|
|
...(theme?.letterSpacings || {}),
|
|
},
|
|
lineHeights: {
|
|
...typography.lineHeights,
|
|
...(theme?.lineHeights || {}),
|
|
},
|
|
fontSizes: {
|
|
...typography.fontSizes,
|
|
...(theme?.fontSizes || {}),
|
|
},
|
|
radii: {
|
|
...radii,
|
|
...(theme?.radii || {}),
|
|
},
|
|
shadows: {
|
|
...shadows,
|
|
...(theme?.shadows || {}),
|
|
},
|
|
zIndices: {
|
|
...zIndices,
|
|
...(theme?.zIndices || {}),
|
|
},
|
|
transitions: {
|
|
'all-200': 'all 200ms',
|
|
...(theme?.transitions || {}),
|
|
},
|
|
...(theme || {}),
|
|
},
|
|
themeMap,
|
|
utils: {
|
|
...libUtils,
|
|
...(utils || {}),
|
|
},
|
|
});
|
|
|
|
const darkTheme = createTheme({
|
|
colors: darkColors,
|
|
});
|
|
|
|
return {
|
|
createTheme,
|
|
darkTheme,
|
|
darkThemeSelector: `.${darkTheme} &`,
|
|
...otherStitches,
|
|
};
|
|
};
|
|
|
|
export const dripStitches = createDripStitches();
|