Skip to content

Commit

Permalink
feat: add material-ui tailwind preset
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp committed Sep 20, 2024
1 parent 88389b5 commit 0555bf6
Show file tree
Hide file tree
Showing 4 changed files with 507 additions and 7 deletions.
28 changes: 21 additions & 7 deletions .storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,20 @@ import {
ThemeProvider,
useColorScheme,
} from "@mui/material/styles";
import { DocsContainer, DocsContainerProps } from "@storybook/blocks";
import { useDarkMode } from "storybook-dark-mode";
import "./global.css";
import draggableIframe from "./decorators/draggableIframe";
import "./tailwind.css";

const theme = createTheme({
cssVariables: { colorSchemeSelector: "data" },
colorSchemes: { light: true, dark: true },
});
function CssVarsProvider({ children }: { children: React.ReactNode }) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

const ModeObserver = () => {
const isDark = useDarkMode();
const { setMode } = useColorScheme();
Expand Down Expand Up @@ -88,21 +97,26 @@ const preview: Preview = {
hideNoControlsWarning: true,
expanded: false,
},
docs: {
container: ({
children,
...props
}: DocsContainerProps & { children: React.ReactNode }) => (
<CssVarsProvider>
<DocsContainer {...props}>{children}</DocsContainer>
</CssVarsProvider>
),
},
},
decorators: [
draggableIframe(),
(Story) => {
return (
<ThemeProvider
theme={createTheme({
cssVariables: { colorSchemeSelector: "data" },
colorSchemes: { light: true, dark: true },
})}
>
<CssVarsProvider>
<ModeObserver />
<CssBaseline />
<Story />
</ThemeProvider>
</CssVarsProvider>
);
},
],
Expand Down
207 changes: 207 additions & 0 deletions blocks/tailwind-preset/material-ui-tailwind-preset.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
const plugin = require("tailwindcss/plugin");
const { createTheme } = require("@mui/material/styles");

const theme = createTheme({ cssVariables: true });

const font = {};
Object.entries(theme.vars.font).forEach(([key, value]) => {
font[`.font-${key}`] = {
font: `var(--mui-font-${key})`,
};
});

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
screens: {
sm: `${theme.breakpoints.values.sm}px`,
md: `${theme.breakpoints.values.md}px`,
lg: `${theme.breakpoints.values.lg}px`,
xl: `${theme.breakpoints.values.xl}px`,
"2xl": "1920px",
},
colors: {
primary: {
DEFAULT: "rgb(var(--mui-palette-primary-mainChannel))",
light: "rgb(var(--mui-palette-primary-lightChannel))",
dark: "rgb(var(--mui-palette-primary-darkChannel))",
contrastText: "rgb(var(--mui-palette-primary-contrastTextChannel))",
},
secondary: {
DEFAULT: "rgb(var(--mui-palette-secondary-mainChannel))",
light: "rgb(var(--mui-palette-secondary-lightChannel))",
dark: "rgb(var(--mui-palette-secondary-darkChannel))",
contrastText: "rgb(var(--mui-palette-secondary-contrastTextChannel))",
},
info: {
DEFAULT: "rgb(var(--mui-palette-info-mainChannel))",
light: "rgb(var(--mui-palette-info-lightChannel))",
dark: "rgb(var(--mui-palette-info-darkChannel))",
contrastText: "rgb(var(--mui-palette-info-contrastTextChannel))",
},
error: {
DEFAULT: "rgb(var(--mui-palette-error-mainChannel))",
light: "rgb(var(--mui-palette-error-lightChannel))",
dark: "rgb(var(--mui-palette-error-darkChannel))",
contrastText: "rgb(var(--mui-palette-error-contrastTextChannel))",
},
success: {
DEFAULT: "rgb(var(--mui-palette-success-mainChannel))",
light: "rgb(var(--mui-palette-success-lightChannel))",
dark: "rgb(var(--mui-palette-success-darkChannel))",
contrastText: "rgb(var(--mui-palette-success-contrastTextChannel))",
},
warning: {
DEFAULT: "rgb(var(--mui-palette-warning-mainChannel))",
light: "rgb(var(--mui-palette-warning-lightChannel))",
dark: "rgb(var(--mui-palette-warning-darkChannel))",
contrastText: "rgb(var(--mui-palette-warning-contrastTextChannel))",
},
text: {
primary: "var(--mui-palette-text-primary)",
secondary: "var(--mui-palette-text-secondary)",
disabled: "var(--mui-palette-text-disabled)",
},
common: {
background: "var(--mui-palette-common-background)",
onBackground: "var(--mui-palette-common-onBackground)",
},
gray: {
50: "var(--mui-palette-grey-50)",
100: "var(--mui-palette-grey-100)",
200: "var(--mui-palette-grey-200)",
300: "var(--mui-palette-grey-300)",
400: "var(--mui-palette-grey-400)",
500: "var(--mui-palette-grey-500)",
600: "var(--mui-palette-grey-600)",
700: "var(--mui-palette-grey-700)",
800: "var(--mui-palette-grey-800)",
900: "var(--mui-palette-grey-900)",
A100: "var(--mui-palette-grey-A100)",
A200: "var(--mui-palette-grey-A200)",
A400: "var(--mui-palette-grey-A400)",
A700: "var(--mui-palette-grey-A700)",
},
divider: "var(--mui-palette-divider)",
background: {
default: "var(--mui-palette-background-default)",
paper: "var(--mui-palette-background-paper)",
},
action: {
active: "var(--mui-palette-action-active)",
hover: "var(--mui-palette-action-hover)",
selected: "var(--mui-palette-action-selected)",
disabled: "var(--mui-palette-action-disabled)",
focus: "var(--mui-palette-action-focus)",
},
Alert: {
errorColor: "var(--mui-palette-Alert-errorColor)",
infoColor: "var(--mui-palette-Alert-infoColor)",
successColor: "var(--mui-palette-Alert-successColor)",
warningColor: "var(--mui-palette-Alert-warningColor)",
errorFilledBg: "var(--mui-palette-Alert-errorFilledBg)",
infoFilledBg: "var(--mui-palette-Alert-infoFilledBg)",
successFilledBg: "var(--mui-palette-Alert-successFilledBg)",
warningFilledBg: "var(--mui-palette-Alert-warningFilledBg)",
errorFilledColor: "var(--mui-palette-Alert-errorFilledColor)",
infoFilledColor: "var(--mui-palette-Alert-infoFilledColor)",
successFilledColor: "var(--mui-palette-Alert-successFilledColor)",
warningFilledColor: "var(--mui-palette-Alert-warningFilledColor)",
errorStandardBg: "var(--mui-palette-Alert-errorStandardBg)",
infoStandardBg: "var(--mui-palette-Alert-infoStandardBg)",
successStandardBg: "var(--mui-palette-Alert-successStandardBg)",
warningStandardBg: "var(--mui-palette-Alert-warningStandardBg)",
errorIconColor: "var(--mui-palette-Alert-errorIconColor)",
infoIconColor: "var(--mui-palette-Alert-infoIconColor)",
successIconColor: "var(--mui-palette-Alert-successIconColor)",
warningIconColor: "var(--mui-palette-Alert-warningIconColor)",
},
AppBar: {
defaultBg: "var(--mui-palette-AppBar-defaultBg)",
},
Avatar: {
defaultBg: "var(--mui-palette-Avatar-defaultBg)",
},
Button: {
inheritContainedBg: "var(--mui-palette-Button-inheritContainedBg)",
inheritContainedHoverBg:
"var(--mui-palette-Button-inheritContainedHoverBg)",
},
Chip: {
defaultBorder: "var(--mui-palette-Chip-defaultBorder)",
defaultAvatarColor: "var(--mui-palette-Chip-defaultAvatarColor)",
defaultIconColor: "var(--mui-palette-Chip-defaultIconColor)",
},
FilledInput: {
bg: "var(--mui-palette-FilledInput-bg)",
hoverBg: "var(--mui-palette-FilledInput-hoverBg)",
disabledBg: "var(--mui-palette-FilledInput-disabledBg)",
},
LinearProgress: {
primaryBg: "var(--mui-palette-LinearProgress-primaryBg)",
secondaryBg: "var(--mui-palette-LinearProgress-secondaryBg)",
errorBg: "var(--mui-palette-LinearProgress-errorBg)",
infoBg: "var(--mui-palette-LinearProgress-infoBg)",
successBg: "var(--mui-palette-LinearProgress-successBg)",
warningBg: "var(--mui-palette-LinearProgress-warningBg)",
},
Skeleton: {
bg: "var(--mui-palette-Skeleton-bg)",
},
Slider: {
primaryTrack: "var(--mui-palette-Slider-primaryTrack)",
secondaryTrack: "var(--mui-palette-Slider-secondaryTrack)",
errorTrack: "var(--mui-palette-Slider-errorTrack)",
infoTrack: "var(--mui-palette-Slider-infoTrack)",
successTrack: "var(--mui-palette-Slider-successTrack)",
warningTrack: "var(--mui-palette-Slider-warningTrack)",
},
SnackbarContent: {
bg: "var(--mui-palette-SnackbarContent-bg)",
color: "var(--mui-palette-SnackbarContent-color)",
},
SpeedDialAction: {
fabHoverBg: "var(--mui-palette-SpeedDialAction-fabHoverBg)",
},
StepConnector: {
border: "var(--mui-palette-StepConnector-border)",
},
StepContent: {
border: "var(--mui-palette-StepContent-border)",
},
Switch: {
defaultColor: "var(--mui-palette-Switch-defaultColor)",
defaultDisabledColor:
"var(--mui-palette-Switch-defaultDisabledColor)",
primaryDisabledColor:
"var(--mui-palette-Switch-primaryDisabledColor)",
secondaryDisabledColor:
"var(--mui-palette-Switch-secondaryDisabledColor)",
errorDisabledColor: "var(--mui-palette-Switch-errorDisabledColor)",
infoDisabledColor: "var(--mui-palette-Switch-infoDisabledColor)",
successDisabledColor:
"var(--mui-palette-Switch-successDisabledColor)",
warningDisabledColor:
"var(--mui-palette-Switch-warningDisabledColor)",
},
TableCell: {
border: "var(--mui-palette-TableCell-border)",
},
Tooltip: {
bg: "var(--mui-palette-Tooltip-bg)",
},
},
borderRadius: {
sm: "calc(var(--mui-shape-borderRadius) / 2)",
DEFAULT: "var(--mui-shape-borderRadius)",
lg: "calc(var(--mui-shape-borderRadius) * 2)",
},
},
},
plugins: [
plugin(function ({ addUtilities }) {
addUtilities(font);
}),
],
};
Loading

0 comments on commit 0555bf6

Please sign in to comment.