sage-nexus-ui 1.0.0

package/src/theme/sageTheme.ts

@@ -0,0 +1,565 @@
+import "@mui/x-data-grid/themeAugmentation";
+
+import { alpha, createTheme, type Theme } from "@mui/material/styles";
+
+export type ThemeMode = "light" | "dark";
+
+type ModeTokens = {
+  background: {
+    default: string;
+    paper: string;
+    subtle: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
+    greens: string;
+  };
+  border: string;
+  shadow: string;
+};
+
+export type GradientBorderOptions = {
+  borderRadius?: number;
+  padding?: number;
+};
+
+export const colours = {
+  brilliantGreen: "#00D639",
+  primaryGreenHover: "#00BE32",
+  primaryGreenActive: "#00AA2D",
+  jade: "#00A65C",
+  teal: "#006362",
+  navy: "#00293F",
+  cherry: "#cc0f4b",
+  terra: "#A13829",
+  amber: "#E9875B",
+  gold: "#F5C518",
+  black: "#000000",
+  white: "#FFFFFF",
+  darkGrey: "#55616D",
+  lightGrey: "#ffffffc2",
+} as const;
+
+export const gradients = {
+  brand: `linear-gradient(135deg, ${colours.brilliantGreen} 0%, ${colours.jade} 42%, ${colours.teal} 100%)`,
+  nexus: `linear-gradient(135deg, ${colours.brilliantGreen} 0%, #00D6DE 40%, #2D60FF 100%)`,
+  textHighlightAi: `linear-gradient(30deg, ${colours.brilliantGreen} 0%, #00D6DE 40%, #9D60FF 90%)`,
+  mesh: `radial-gradient(circle at top right, ${alpha(colours.brilliantGreen, 0.16)} 0%, transparent 34%), linear-gradient(135deg, ${alpha(colours.jade, 0.08)} 0%, ${alpha(colours.teal, 0.12)} 100%)`,
+} as const;
+
+const getModeTokens = (mode: ThemeMode): ModeTokens => {
+  const isDark = mode === "dark";
+
+  return {
+    background: {
+      default: isDark ? colours.black : "#F5F7F6",
+      paper: isDark ? "#111111" : colours.white,
+      subtle: isDark ? "#1A1A1A" : "#EEF2EF",
+    },
+    text: {
+      primary: isDark ? colours.white : colours.black,
+      secondary: isDark ? colours.lightGrey : colours.darkGrey,
+      greens: isDark ? colours.brilliantGreen : colours.jade,
+    },
+    border: isDark ? "rgba(255, 255, 255, 0.10)" : "rgba(0, 0, 0, 0.10)",
+    shadow: isDark
+      ? "0 28px 80px rgba(0, 0, 0, 0.42)"
+      : "0 24px 64px rgba(0, 41, 63, 0.12)",
+  };
+};
+
+export const getGradientBorderStyles = (
+  theme: Theme,
+  options: GradientBorderOptions = {},
+) => {
+  const { borderRadius = theme.shape.borderRadius, padding = 1 } = options;
+
+  return {
+    position: "relative",
+    borderRadius,
+    border: `${padding}px solid transparent`,
+    background: theme.palette.background.paper,
+    backgroundClip: "padding-box",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      borderRadius: "inherit",
+      padding: `${padding}px`,
+      background: gradients.brand,
+      WebkitMask:
+        "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      WebkitMaskComposite: "xor",
+      maskComposite: "exclude",
+      pointerEvents: "none",
+    },
+  };
+};
+
+export const createSageTheme = (mode: ThemeMode = "light"): Theme => {
+  const tokens = getModeTokens(mode);
+  const outlinedPrimaryColor =
+    mode === "dark" ? colours.brilliantGreen : colours.jade;
+  const outlinedPrimaryHoverColor =
+    mode === "dark" ? colours.primaryGreenHover : colours.primaryGreenActive;
+  const buttonTransition =
+    "color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease";
+
+  return createTheme({
+    palette: {
+      mode,
+      primary: {
+        main: colours.brilliantGreen,
+        dark: colours.primaryGreenActive,
+        contrastText: colours.black,
+      },
+      secondary: {
+        main: colours.teal,
+        contrastText: colours.white,
+      },
+      success: {
+        main: colours.jade,
+        contrastText: colours.white,
+      },
+      warning: {
+        main: colours.amber,
+        contrastText: colours.white,
+      },
+      error: {
+        main: colours.cherry,
+        contrastText: colours.white,
+      },
+      info: {
+        main: colours.navy,
+        contrastText: colours.white,
+      },
+      background: {
+        default: tokens.background.default,
+        paper: tokens.background.paper,
+      },
+      text: tokens.text,
+      divider: tokens.border,
+    },
+    shape: {
+      borderRadius: 8,
+    },
+    typography: {
+      fontFamily: "SageText, Inter, Segoe UI, sans-serif",
+      button: {
+        fontFamily: "SageUI, Inter, Segoe UI, sans-serif",
+        fontSize: "0.95rem",
+        fontWeight: 600,
+        letterSpacing: "0.01em",
+        textTransform: "none",
+      },
+      overline: {
+        fontFamily: "SageUI, Inter, Segoe UI, sans-serif",
+        fontWeight: 700,
+        fontSize: "0.75rem",
+        letterSpacing: "0.12em",
+        textTransform: "uppercase",
+      },
+    },
+    shadows: [
+      "none",
+      "0 4px 14px rgba(0, 0, 0, 0.08)",
+      "0 10px 28px rgba(0, 0, 0, 0.10)",
+      "0 12px 36px rgba(0, 0, 0, 0.12)",
+      "0 16px 44px rgba(0, 0, 0, 0.14)",
+      "0 20px 48px rgba(0, 0, 0, 0.16)",
+      "0 24px 56px rgba(0, 0, 0, 0.18)",
+      "0 28px 64px rgba(0, 0, 0, 0.20)",
+      "0 32px 72px rgba(0, 0, 0, 0.22)",
+      "0 36px 80px rgba(0, 0, 0, 0.24)",
+      "0 40px 88px rgba(0, 0, 0, 0.26)",
+      "0 44px 96px rgba(0, 0, 0, 0.28)",
+      "0 48px 104px rgba(0, 0, 0, 0.30)",
+      "0 52px 112px rgba(0, 0, 0, 0.32)",
+      "0 56px 120px rgba(0, 0, 0, 0.34)",
+      "0 60px 128px rgba(0, 0, 0, 0.36)",
+      "0 64px 136px rgba(0, 0, 0, 0.38)",
+      "0 68px 144px rgba(0, 0, 0, 0.40)",
+      "0 72px 152px rgba(0, 0, 0, 0.42)",
+      "0 76px 160px rgba(0, 0, 0, 0.44)",
+      "0 80px 168px rgba(0, 0, 0, 0.46)",
+      "0 84px 176px rgba(0, 0, 0, 0.48)",
+      "0 88px 184px rgba(0, 0, 0, 0.50)",
+      "0 92px 192px rgba(0, 0, 0, 0.52)",
+      "0 96px 200px rgba(0, 0, 0, 0.54)",
+    ],
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          html: {
+            backgroundColor: tokens.background.default,
+          },
+          body: {
+            backgroundColor: tokens.background.default,
+            fontFamily: "SageText, Inter, Segoe UI, sans-serif",
+            color: tokens.text.primary,
+            "--sage-text-greens": tokens.text.greens,
+            transition: "background-color 200ms ease, color 200ms ease",
+          },
+          "#root": {
+            minHeight: "100vh",
+          },
+          "::selection": {
+            backgroundColor: alpha(colours.brilliantGreen, 0.28),
+            color: tokens.text.primary,
+          },
+          a: {
+            color: tokens.text.greens,
+            "&:hover": {
+              color: tokens.text.secondary,
+            },
+          },
+          ".greens": {
+            color: "var(--sage-text-greens)",
+            fontWeight: 700,
+          },
+          ".greys": {
+            color: tokens.text.secondary,
+          },
+          h1: {
+            color: tokens.text.primary,
+            fontSize: "clamp(2rem, 3vw, 2.75rem)",
+            lineHeight: 1.08,
+            letterSpacing: "-0.02em",
+            fontWeight: 700,
+            margin: 0,
+          },
+          h2: {
+            color: tokens.text.secondary,
+            fontSize: "1.5rem",
+            lineHeight: 1.2,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            margin: 0,
+          },
+          h3: {
+            color: tokens.text.greens,
+            fontSize: "0.8rem",
+            lineHeight: 1.25,
+            fontWeight: 600,
+            marginTop: 0,
+            marginBottom: 8,
+            textTransform: "uppercase",
+          },
+          h4: {
+            color: tokens.text.primary,
+            fontSize: "0.8rem",
+            lineHeight: 1,
+            fontWeight: 600,
+            margin: 0,
+            fontFamily: "SageText, Inter, Segoe UI, sans-serif",
+          },
+          p: {
+            fontSize: "0.8rem",
+            lineHeight: 1.4,
+            letterSpacing: "0",
+            margin: 0,
+            fontWeight: 400,
+            fontFamily: "SageText, Inter, Segoe UI, sans-serif",
+          },
+          aside: {
+            marginRight: 1.25,
+            borderLeft: "2px solid",
+            borderColor: tokens.text.secondary,
+            padding: "0 8px",
+          },
+        },
+      },
+      MuiPaper: {
+        defaultProps: {
+          elevation: 1,
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            backgroundImage: "none",
+            border: `1px solid ${tokens.border}`,
+            borderRadius: theme.shape.borderRadius,
+            padding: theme.spacing(1),
+          }),
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            boxShadow: tokens.shadow,
+            border: `1px solid ${tokens.border}`,
+          }),
+        },
+      },
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true,
+        },
+        styleOverrides: {
+          root: {
+            borderRadius: 999,
+            paddingInline: 18,
+            minHeight: 48,
+            transition: buttonTransition,
+            "&.MuiButton-containedPrimary": {
+              color: `${colours.black} !important`,
+            },
+            "&.MuiButton-containedPrimary:hover": {
+              color: `${colours.black} !important`,
+            },
+            "&.MuiButton-containedPrimary:active": {
+              color: `${colours.black} !important`,
+            },
+          },
+          contained: {
+            "&.MuiButton-containedPrimary": {
+              color: `${colours.black} !important`,
+              "&:hover": {
+                backgroundColor: colours.primaryGreenHover,
+                color: `${colours.black} !important`,
+              },
+              "&:active": {
+                color: `${colours.black} !important`,
+              },
+            },
+            "&.MuiButton-containedPrimary:hover": {
+              color: `${colours.black} !important`,
+            },
+          },
+          outlined: {
+            borderWidth: 1.5,
+            transition: buttonTransition,
+            "&:hover": {
+              borderWidth: 1.5,
+            },
+            "&.MuiButton-outlinedPrimary": {
+              color: outlinedPrimaryColor,
+              borderColor: alpha(
+                outlinedPrimaryColor,
+                mode === "dark" ? 0.8 : 0.72,
+              ),
+              transition: buttonTransition,
+              "&:hover": {
+                color: outlinedPrimaryHoverColor,
+                borderColor: outlinedPrimaryHoverColor,
+                backgroundColor: alpha(
+                  outlinedPrimaryHoverColor,
+                  mode === "dark" ? 0.12 : 0.08,
+                ),
+                transition: buttonTransition,
+              },
+            },
+          },
+          sizeSmall: {
+            minHeight: 0,
+            minWidth: 0,
+            paddingInline: 0,
+            paddingBlock: 0,
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            borderRadius: 999,
+            fontFamily: "SageUI, Inter, Segoe UI, sans-serif",
+          },
+        },
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            borderColor: tokens.border,
+          },
+        },
+      },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${tokens.border}`,
+            backgroundColor: tokens.background.paper,
+            color: tokens.text.primary,
+            "--DataGrid-rowBorderColor": tokens.border,
+            "--DataGrid-containerBackground": tokens.background.paper,
+            "--DataGrid-pinnedBackground": tokens.background.paper,
+            "& .MuiDataGrid-toolbarContainer": {
+              padding: "12px 16px 0",
+              gap: 8,
+            },
+            "& .MuiDataGrid-toolbarContainer .MuiButton-root": {
+              minHeight: 36,
+              paddingInline: 12,
+              color: tokens.text.secondary,
+            },
+            "& .MuiDataGrid-toolbarContainer .MuiInputBase-root": {
+              borderRadius: 999,
+              backgroundColor: alpha(
+                colours.brilliantGreen,
+                mode === "dark" ? 0.08 : 0.05,
+              ),
+            },
+            "& .MuiDataGrid-toolbarContainer .MuiInputBase-input": {
+              paddingBlock: 8,
+            },
+            "& .MuiDataGrid-overlay": {
+              backgroundColor: "transparent",
+            },
+          }),
+          columnHeaders: {
+            backgroundColor: alpha(
+              colours.brilliantGreen,
+              mode === "dark" ? 0.12 : 0.08,
+            ),
+            borderBottom: `1px solid ${tokens.border}`,
+          },
+          columnHeader: {
+            "&:focus, &:focus-within": {
+              outline: "none",
+            },
+          },
+          columnHeaderTitle: {
+            fontWeight: 600,
+          },
+          cell: {
+            alignItems: "center",
+            borderTop: `1px solid ${tokens.border}`,
+            "&:focus, &:focus-within": {
+              outline: "none",
+            },
+          },
+          row: {
+            "&:hover": {
+              backgroundColor: alpha(
+                colours.brilliantGreen,
+                mode === "dark" ? 0.08 : 0.04,
+              ),
+            },
+          },
+          footerContainer: {
+            borderTop: `1px solid ${tokens.border}`,
+            backgroundColor: alpha(
+              colours.brilliantGreen,
+              mode === "dark" ? 0.05 : 0.03,
+            ),
+          },
+          sortIcon: {
+            color: colours.brilliantGreen,
+          },
+          menuIconButton: {
+            color: tokens.text.secondary,
+          },
+          withBorderColor: {
+            borderColor: tokens.border,
+          },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${tokens.border}`,
+            backgroundColor: tokens.background.paper,
+            color: tokens.text.primary,
+          }),
+        },
+      },
+      MuiAppBar: {
+        defaultProps: { elevation: 1 },
+        styleOverrides: {
+          root: {
+            backgroundColor: tokens.background.paper,
+            backgroundImage: "none",
+            borderBottom: `1px solid ${tokens.border}`,
+            borderRadius: 0,
+            color: tokens.text.primary,
+          },
+        },
+      },
+      MuiAccordion: {
+        defaultProps: { disableGutters: true, elevation: 0 },
+        styleOverrides: {
+          root: {
+            backgroundColor: "transparent",
+            border: `1px solid ${tokens.border}`,
+            borderRadius: "8px !important",
+            "&:before": { display: "none" },
+            "&.Mui-expanded": {
+              borderColor: alpha(
+                colours.brilliantGreen,
+                mode === "dark" ? 0.4 : 0.3,
+              ),
+            },
+          },
+        },
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            minHeight: 24,
+            "&.Mui-expanded": { minHeight: 24 },
+            "&:focus-visible": {
+              outline: `2px solid ${outlinedPrimaryColor}`,
+              outlineOffset: 2,
+            },
+            padding: 0,
+          }),
+          content: { margin: "0", "&.Mui-expanded": { margin: "0" } },
+          expandIconWrapper: { color: tokens.text.secondary },
+        },
+      },
+      MuiAccordionDetails: {
+        styleOverrides: {
+          root: { padding: 0, borderTop: `1px solid ${tokens.border}` },
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: { minHeight: 40, borderBottom: `1px solid ${tokens.border}` },
+          indicator: { backgroundColor: colours.brilliantGreen, height: 2 },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minHeight: 40,
+            fontFamily: "SageUI, Inter, Segoe UI, sans-serif",
+            fontWeight: 600,
+            fontSize: "0.85rem",
+            letterSpacing: "0.01em",
+            textTransform: "none",
+            color: tokens.text.secondary,
+            "&.Mui-selected": { color: tokens.text.primary },
+            "&:focus-visible": {
+              outline: `2px solid ${outlinedPrimaryColor}`,
+              outlineOffset: 2,
+            },
+          },
+        },
+      },
+      MuiDialog: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            backgroundColor: tokens.background.paper,
+            backgroundImage: "none",
+            border: `1px solid ${tokens.border}`,
+            borderRadius: theme.shape.borderRadius,
+            boxShadow: tokens.shadow,
+          }),
+        },
+      },
+      MuiDialogTitle: {
+        styleOverrides: {
+          root: { paddingBottom: 8 },
+        },
+      },
+      MuiDialogContent: {
+        styleOverrides: {
+          root: { paddingTop: "8px !important" },
+        },
+      },
+    },
+  });
+};

package/src/theme/sxHelpers.ts

@@ -0,0 +1,14 @@
+export const leftPipe = {
+  borderLeft: (theme: any) => `3px solid ${theme.palette.text.primary}`,
+  pl: 0.8,
+};
+
+export const expandableText = (isExpanded: boolean) => ({
+  color: 'text.primary',
+  lineHeight: 1.45,
+  whiteSpace: isExpanded ? 'pre-line' : 'normal',
+  overflow: 'hidden',
+  display: isExpanded ? 'block' : '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: isExpanded ? 'unset' : 2,
+});

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />