sbcrmweb-tma-core
v0.0.48
Published
```typescript jsx // app/layout.tsx import { ThemeProvider } from "sbcrmweb-tma-core";
Downloads
315
Readme
ui-core lib (for NextJs apps)
1. How to connect:
app routing
// app/layout.tsx
import { ThemeProvider } from "sbcrmweb-tma-core";
export default function AppLayout({ children }) {
return (
<html lang="ru" suppressHydrationWarning>
<body>
<ThemeProvider>
{children}
</ThemeProvider>
</body>
</html>
);
}app routing & custom theme
import { createTheme } from "@mui/material/styles";
import { theme } from "sbcrmweb-tma-core";
export default createTheme(theme, {
// .... override theme
});// components/ThemeProvider
"use client";
import { ThemeProvider as BaseThemeProvider } from "sbcrmweb-tma-core";
import theme from "@/theme";
import { PropsWithChildren } from "react";
export default function ThemeProvider({ children }: PropsWithChildren) {
return <BaseThemeProvider theme={theme}>{children}</BaseThemeProvider>;
}// app/layout.tsx
import ThemeProvider from "@/components/ThemeProvider";
export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
return (
<html lang="ru" suppressHydrationWarning>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}2. Usage
// use theme parameters
import { themeParams } from "sbcrmweb-tma-core";
const { BASE_SPACING } = themeParams;
// ...
return (
<Stack sx={{ py: 12 / BASE_SPACING, px: 8 / BASE_SPACING }}>
// ...
</Stack>
);// use components
import { TMACounter } from 'sbcrmweb-tma-core';
// ...
return (
<TMACounter
onLeave={(lastValue) => {
console.log({ lastValue });
}}
onChange={(nextValue) => {
console.log({ nextValue });
}}
/>
);Colors
export const commonColors: CommonColors = {
black: '#000000',
white: '#FFFFFF',
bg_color: {
light: '#FFFFFF',
dark: '#212121',
},
accent_text_color: {
light: '#007AFF',
dark: '#007AFF',
},
button_color: {
light: '#007AFF',
dark: '#2990FF',
},
button_text_color: {
light: '#FFFFFF',
dark: '#FFFFFF',
},
destructive_background: {
light: '#F12E2E05',
dark: '#F12E2E15',
},
destructive_text_color: {
light: '#E53935',
dark: '#E53935',
},
header_bg_color: {
light: '#FFFFFF',
dark: '#212121',
},
hint_color: {
light: '#707579',
dark: '#AAAAAA',
},
link_color: {
light: '#007AFF',
dark: '#2990FF',
},
secondary_bg_color: {
light: '#EFEFF4',
dark: '#0F0F0F',
},
section_bg_color: {
light: '#FFFFFF',
dark: '#212121',
},
section_header_text_color: {
light: '#707579',
dark: '#AAAAAA',
},
subtitle_text_color: {
light: '#707579',
dark: '#AAAAAA',
},
text_color: {
light: '#000000',
dark: '#FFFFFF',
},
divider: {
light: '#00000015',
dark: '#FFFFFF05',
},
card_bg_color: {
light: '#FFFFFF',
dark: '#323232',
},
skeleton: {
light: '#00000003',
dark: '#FFFFFF03',
},
secondary_fill: {
light: '#4378FF10',
dark: '#2990FF15',
},
secondary_hint_color: {
light: '#A2ACB0',
dark: '#78797E',
},
outline: {
light: '#00000005',
dark: '#FFFFFF10',
},
plain_foreground: {
light: '#00000080',
dark: '#FFFFFF95',
},
plain_background: {
light: '#00000004',
dark: '#FFFFFF0A',
},
toast_accent_color: {
light: '#55A6FF',
dark: '#55A6FF',
},
};Typography
const typography = {
largeTitleRegular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 34,
fontWeight: 400,
lineHeight: 1.3,
letterSpacing: 0.25,
},
largeTitleSemibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 34,
fontWeight: 600,
lineHeight: 1.3,
letterSpacing: 0.25,
},
largeTitleBold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 34,
fontWeight: 700,
lineHeight: 1.3,
letterSpacing: 0.25,
},
title1Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 28,
fontWeight: 400,
lineHeight: 1.12,
letterSpacing: 0.1,
},
title1Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 28,
fontWeight: 600,
lineHeight: 1.12,
letterSpacing: 0.1,
},
title1Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 28,
fontWeight: 700,
lineHeight: 1.12,
letterSpacing: 0.1,
},
title2Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 24,
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: 0,
},
title2Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 24,
fontWeight: 600,
lineHeight: 1.5,
letterSpacing: 0,
},
title2Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 24,
fontWeight: 700,
lineHeight: 1.5,
letterSpacing: 0,
},
title3Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 20,
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: 0.15,
},
title3Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 20,
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: 0.15,
},
title3Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 20,
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: 0.15,
},
headlineRegular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 19,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
headlineSemibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 19,
fontWeight: 600,
lineHeight: 1.75,
letterSpacing: 0.15,
},
headlineBold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 19,
fontWeight: 700,
lineHeight: 1.75,
letterSpacing: 0.15,
},
textRegular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 17,
fontWeight: 400,
lineHeight: 1.37,
letterSpacing: 0.15,
},
textMedium: {
fontFamily: SFPro.style.fontFamily,
fontSize: 17,
fontWeight: 500,
lineHeight: 1.37,
letterSpacing: 0.15,
},
textSemibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 17,
fontWeight: 600,
lineHeight: 1.37,
letterSpacing: 0.15,
},
textBold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 17,
fontWeight: 700,
lineHeight: 1.37,
letterSpacing: 0.15,
},
subheadline1Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 16,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline1Mono: {
fontFamily: SFProMono.style.fontFamily,
fontSize: 16,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline1Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 16,
fontWeight: 600,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline1Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 16,
fontWeight: 700,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline2Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 15,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline2Mono: {
fontFamily: SFProMono.style.fontFamily,
fontSize: 15,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline2Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 15,
fontWeight: 600,
lineHeight: 1.75,
letterSpacing: 0.15,
},
subheadline2Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 15,
fontWeight: 700,
lineHeight: 1.75,
letterSpacing: 0.15,
},
caption1Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 13,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
caption1Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 13,
fontWeight: 600,
lineHeight: 1.75,
letterSpacing: 0.15,
},
caption1Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 13,
fontWeight: 700,
lineHeight: 1.75,
letterSpacing: 0.15,
},
caption2Regular: {
fontFamily: SFPro.style.fontFamily,
fontSize: 10,
fontWeight: 400,
lineHeight: 1.75,
letterSpacing: 0.15,
},
caption2Semibold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 10,
fontWeight: 600,
lineHeight: 1.75,
letterSpacing: 0.15,
},
caption2Bold: {
fontFamily: SFPro.style.fontFamily,
fontSize: 10,
fontWeight: 700,
lineHeight: 1.75,
letterSpacing: 0.15,
},
};