rouse-ui-kit 0.1.0

package/src/theme.ts

@@ -0,0 +1,220 @@
+import { createTheme } from "@mui/material/styles";
+import {
+  background,
+  error,
+  gray,
+  info,
+  interaction,
+  other,
+  primary,
+  secondary,
+  success,
+  text,
+  typography as t,
+  warning,
+} from "./design-tokens";
+
+const theme = createTheme({
+  // ─── Palette ────────────────────────────────────────────────────────────────
+  palette: {
+    primary: {
+      light:        primary.light,
+      main:         primary.main,
+      dark:         primary.dark,
+      contrastText: primary.contrastText,
+    },
+    secondary: {
+      light:        secondary.light,
+      main:         secondary.main,
+      dark:         secondary.dark,
+      contrastText: secondary.contrastText,
+    },
+    error: {
+      light: error.light,
+      main:  error.main,
+    },
+    warning: {
+      main: warning.main,
+    },
+    success: {
+      light: success.light,
+      main:  success.main,
+    },
+    info: {
+      light: info.light,
+      main:  info.main,
+    },
+    text: {
+      primary:   text.primary,
+      secondary: text.secondary,
+      disabled:  text.disabled,
+    },
+    background: {
+      paper:   background.paper,
+      default: background.default,
+    },
+    divider: other.divider,
+    action: {
+      disabledBackground: other.divider,
+      disabled:           text.disabled,
+      hover:              interaction.hover,
+      selected:           interaction.selected,
+    },
+  },
+
+  // ─── Typography ─────────────────────────────────────────────────────────────
+  typography: {
+    fontFamily: t.fontFamily,
+    h1:         t.h1,
+    h2:         t.h2,
+    h3:         t.h3,
+    h4:         t.h4,
+    h5:         t.h5,
+    h6:         t.h6,
+    subtitle1:  t.subtitle1,
+    subtitle2:  t.subtitle2,
+    body1:      t.body1,
+    body2:      t.body2,
+    button:     t.button,
+    caption:    t.caption,
+    overline:   t.overline,
+  },
+
+  // ─── Component overrides ────────────────────────────────────────────────────
+  components: {
+    // Button
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: "4px",
+          padding: "8px 16px",
+          boxShadow: "none",
+          "&:hover": { boxShadow: "none" },
+          "&:focus-visible": {
+            outline:       `4px solid ${interaction.focusRing}`,
+            outlineOffset: "0px",
+          },
+        },
+        containedPrimary: {
+          "&:hover": { backgroundColor: primary.dark },
+        },
+        outlinedPrimary: {
+          border: `1px solid ${primary.light}`,
+          color:  primary.main,
+          "&:hover": {
+            backgroundColor: primary.tint,
+            border:          `1px solid ${primary.light}`,
+          },
+          "&:focus-visible": {
+            outline:       `4px solid ${interaction.focusRing}`,
+            outlineOffset: "0px",
+            border:        `1px solid ${primary.light}`,
+          },
+          "&.Mui-disabled": {
+            border: `1px solid ${gray[20]}`,
+            color:  text.disabled,
+          },
+        },
+        textPrimary: {
+          padding: "8px",
+          color:   primary.main,
+          "&:hover": { backgroundColor: primary.tint },
+          "&:focus-visible": {
+            outline:       `4px solid ${interaction.focusRing}`,
+            outlineOffset: "0px",
+          },
+          "&.Mui-disabled": { color: text.disabled },
+        },
+      },
+    },
+
+    // Checkbox
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          padding:      "8px",
+          borderRadius: "19px",
+          color:        primary.main,
+          "& .MuiSvgIcon-root": { fontSize: "20px" },
+          "&:hover":        { backgroundColor: primary.shade8p },
+          "&.Mui-focusVisible": { backgroundColor: interaction.focus },
+          "&.Mui-checked":  { color: primary.main },
+          "&.Mui-disabled": { color: gray[20] },
+        },
+      },
+    },
+
+    // FormControlLabel (Checkbox label)
+    MuiFormControlLabel: {
+      styleOverrides: {
+        label: {
+          ...t.caption,
+          color: text.primary,
+          "&.Mui-disabled": { color: text.disabled },
+        },
+      },
+    },
+
+    // OutlinedInput (TextField + Select shared)
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          fontSize:      t.inputText.fontSize,
+          letterSpacing: t.inputText.letterSpacing,
+          color:         text.primary,
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: other.outlinedBorder,
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: primary.main,
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: primary.main,
+            borderWidth: "2px",
+          },
+          "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+            borderColor: other.divider,
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: error.main,
+            borderWidth: "2px",
+          },
+        },
+        input: {
+          padding:    "9px 14px",
+          lineHeight: t.inputText.lineHeight,
+        },
+      },
+    },
+
+    // InputLabel (Select + TextField shared)
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontSize:      t.inputText.fontSize,
+          lineHeight:    t.inputText.lineHeight,
+          letterSpacing: t.inputText.letterSpacing,
+          color:         text.secondary,
+          "&.Mui-focused":  { color: primary.main },
+          "&.Mui-error":    { color: error.main },
+          "&.Mui-disabled": { color: "rgba(0, 0, 0, 0.38)" },
+        },
+      },
+    },
+
+    // FormHelperText
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          ...t.helperText,
+          color:       text.secondary,
+          marginTop:   "4px",
+          marginLeft:  0,
+          marginRight: 0,
+        },
+      },
+    },
+  },
+});
+
+export default theme;