@plantops/ui 0.1.0

package/dist/theme/color-mode.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Which colour mode is showing, and how a user changes it.
+ *
+ * Split out of {@link PlantOpsThemeProvider} because the header's toggle needs
+ * to *set* the mode from far below the provider that applies it, and a context
+ * is the only way to do that without every shell prop-drilling a setter it does
+ * not otherwise care about.
+ *
+ * ## Hydration
+ *
+ * The stored preference lives in `localStorage`, which the server cannot read —
+ * so the first render always uses `defaultMode` and the stored value is adopted
+ * in an effect. Rendering the stored mode directly would produce server HTML
+ * that disagrees with the first client render, and React would discard the
+ * whole tree. The visible cost is one frame in the default mode on a hard
+ * reload; consumers that mind can inline a blocking script that sets the
+ * preference before paint and pass it as `defaultMode`.
+ */
+import * as React from 'react';
+import type { ColorMode } from './tokens';
+/** Where the preference is kept. Shared by every PlantOps console on the host. */
+export declare const COLOR_MODE_STORAGE_KEY = "plantops.color-mode";
+export interface ColorModeContextValue {
+    mode: ColorMode;
+    setMode: (mode: ColorMode) => void;
+    toggle: () => void;
+}
+/**
+ * The current colour mode.
+ *
+ * Throws outside a {@link PlantOpsThemeProvider} rather than defaulting to
+ * light: a silent default would render a toggle that appears to work and
+ * changes nothing.
+ */
+export declare function useColorMode(): ColorModeContextValue;
+export interface ColorModeProviderProps {
+    children: React.ReactNode;
+    /** What renders before the stored preference is known. Default `'light'`. */
+    defaultMode?: ColorMode;
+    /** Override to give an app its own preference slot. */
+    storageKey?: string;
+}
+/** Supplies {@link useColorMode}. {@link PlantOpsThemeProvider} includes one. */
+export declare function ColorModeProvider({ children, defaultMode, storageKey, }: ColorModeProviderProps): React.ReactElement;
+//# sourceMappingURL=color-mode.d.ts.map

package/dist/theme/color-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode.d.ts","sourceRoot":"","sources":["../../src/theme/color-mode.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,wBAAwB,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAID;;;;;;GAMG;AACH,wBAAgB,YAAY,IAAI,qBAAqB,CAQpD;AA2BD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAqB,EACrB,UAAmC,GACpC,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CA4B7C"}

package/dist/theme/color-mode.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Which colour mode is showing, and how a user changes it.
+ *
+ * Split out of {@link PlantOpsThemeProvider} because the header's toggle needs
+ * to *set* the mode from far below the provider that applies it, and a context
+ * is the only way to do that without every shell prop-drilling a setter it does
+ * not otherwise care about.
+ *
+ * ## Hydration
+ *
+ * The stored preference lives in `localStorage`, which the server cannot read —
+ * so the first render always uses `defaultMode` and the stored value is adopted
+ * in an effect. Rendering the stored mode directly would produce server HTML
+ * that disagrees with the first client render, and React would discard the
+ * whole tree. The visible cost is one frame in the default mode on a hard
+ * reload; consumers that mind can inline a blocking script that sets the
+ * preference before paint and pass it as `defaultMode`.
+ */
+import * as React from 'react';
+/** Where the preference is kept. Shared by every PlantOps console on the host. */
+export const COLOR_MODE_STORAGE_KEY = 'plantops.color-mode';
+const ColorModeContext = React.createContext(null);
+/**
+ * The current colour mode.
+ *
+ * Throws outside a {@link PlantOpsThemeProvider} rather than defaulting to
+ * light: a silent default would render a toggle that appears to work and
+ * changes nothing.
+ */
+export function useColorMode() {
+    const value = React.useContext(ColorModeContext);
+    if (value === null) {
+        throw new Error('useColorMode() requires a <PlantOpsThemeProvider> above it in the tree.');
+    }
+    return value;
+}
+function isColorMode(value) {
+    return value === 'light' || value === 'dark';
+}
+/** Reads the persisted preference, tolerating storage being unavailable. */
+function readStoredMode(storageKey) {
+    try {
+        const stored = globalThis.localStorage?.getItem(storageKey);
+        return isColorMode(stored) ? stored : null;
+    }
+    catch {
+        // Private-mode Safari and locked-down enterprise policies both throw on
+        // access rather than returning null. A theme preference is not worth an
+        // error boundary.
+        return null;
+    }
+}
+function writeStoredMode(storageKey, mode) {
+    try {
+        globalThis.localStorage?.setItem(storageKey, mode);
+    }
+    catch {
+        /* see readStoredMode */
+    }
+}
+/** Supplies {@link useColorMode}. {@link PlantOpsThemeProvider} includes one. */
+export function ColorModeProvider({ children, defaultMode = 'light', storageKey = COLOR_MODE_STORAGE_KEY, }) {
+    const [mode, setModeState] = React.useState(defaultMode);
+    React.useEffect(() => {
+        const stored = readStoredMode(storageKey);
+        if (stored !== null)
+            setModeState(stored);
+    }, [storageKey]);
+    const setMode = React.useCallback((next) => {
+        setModeState(next);
+        writeStoredMode(storageKey, next);
+    }, [storageKey]);
+    const value = React.useMemo(() => ({
+        mode,
+        setMode,
+        toggle: () => setMode(mode === 'dark' ? 'light' : 'dark'),
+    }), [mode, setMode]);
+    return (_jsx(ColorModeContext.Provider, { value: value, children: children }));
+}

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { ColorMode } from './tokens';
+export interface PlantOpsThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * Fixes the colour mode and disables the internal preference store — for a
+     * consumer whose mode comes from elsewhere (a user profile, an OS media
+     * query it already watches). Omit for the normal, self-managing behaviour.
+     */
+    mode?: ColorMode;
+    /** Initial mode before a stored preference is read. Default `'light'`. */
+    defaultMode?: ColorMode;
+    /** `localStorage` slot for the preference. */
+    storageKey?: string;
+}
+export declare function PlantOpsThemeProvider({ children, mode, defaultMode, storageKey, }: PlantOpsThemeProviderProps): React.ReactElement;
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,UAAU,GACX,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CASjD"}

package/dist/theme/theme-provider.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The one provider every PlantOps console mounts at its root.
+ *
+ * Three things it does, each of which is a bug if an app forgets it:
+ *
+ * 1. **`ConfigProvider`** applies {@link plantOpsTheme}, so the app looks like
+ *    PlantOps rather than like default antd.
+ * 2. **`App`** supplies the `message`/`notification`/`modal` *hooks*. antd's
+ *    static `message.error(…)` renders outside the React tree and therefore
+ *    outside the theme — it comes out unstyled and, in dark mode, illegible.
+ *    Everything in this library and in `@plantops/web-kit` reaches feedback
+ *    through `App.useApp()`, which only works with this component mounted.
+ * 3. A **root surface**: `body` gets the layout background and the base text
+ *    colour, which antd itself does not set.
+ *
+ * `ColorModeProvider` is included so that a consumer mounts one component
+ * rather than remembering the order of two. An app that already has its own
+ * colour-mode source can pass `mode` and skip it.
+ */
+import { App as AntApp, ConfigProvider } from 'antd';
+import * as React from 'react';
+import { ColorModeProvider, useColorMode } from './color-mode';
+import { plantOpsTheme } from './theme';
+export function PlantOpsThemeProvider({ children, mode, defaultMode, storageKey, }) {
+    if (mode !== undefined) {
+        return _jsx(ThemedApp, { mode: mode, children: children });
+    }
+    return (_jsx(ColorModeProvider, { defaultMode: defaultMode, storageKey: storageKey, children: _jsx(ThemedAppFromContext, { children: children }) }));
+}
+function ThemedAppFromContext({ children, }) {
+    const { mode } = useColorMode();
+    return _jsx(ThemedApp, { mode: mode, children: children });
+}
+function ThemedApp({ mode, children, }) {
+    const theme = React.useMemo(() => plantOpsTheme(mode), [mode]);
+    return (_jsx(ConfigProvider, { theme: theme, children: _jsx(AntApp
+        // Room for the fixed header, so a toast never lands on top of the
+        // navigation the user is trying to click.
+        , { 
+            // Room for the fixed header, so a toast never lands on top of the
+            // navigation the user is trying to click.
+            message: { top: 72, maxCount: 3 }, notification: { placement: 'topRight', top: 72 }, style: { minHeight: '100%' }, children: _jsx(RootSurface, { children: children }) }) }));
+}
+/**
+ * Paints `body` from the active theme.
+ *
+ * A `<style>` element rather than a wrapper `div` because the background has to
+ * reach the document element: overscroll, and any fixed-position overlay antd
+ * portals into `body`, both show whatever is behind the React root.
+ */
+function RootSurface({ children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        html, body { height: 100%; }
+        body {
+          margin: 0;
+          background: var(--ant-color-bg-layout);
+          color: var(--ant-color-text);
+          font-family: var(--ant-font-family);
+          -webkit-font-smoothing: antialiased;
+        }
+        *, *::before, *::after { box-sizing: border-box; }
+      ` }), children] }));
+}

package/dist/theme/theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The design language of `tokens.ts`, expressed as Ant Design theme configs.
+ *
+ * One place decides what antd looks like across every PlantOps console. A
+ * screen that needs a colour asks antd for its token (`theme.useToken()`) or
+ * imports from `tokens.ts`; it never writes a hex literal, because the value
+ * that is correct in light mode is wrong in dark mode and a literal cannot know
+ * which one is showing.
+ *
+ * ## Why `cssVar` is on
+ *
+ * With CSS-variable mode antd emits `--ant-color-primary: …` once and every
+ * component references the variable, so switching colour mode re-paints from a
+ * single `:root` rule instead of re-serialising the whole style sheet. That is
+ * what makes the mode toggle instant, and it also keeps the server-rendered
+ * style payload small — which matters because these consoles are Next.js apps
+ * that ship their antd styles from the server on first paint.
+ */
+import type { ThemeConfig } from 'antd';
+import { type ColorMode } from './tokens';
+/** The antd theme for a colour mode. The only way to obtain one. */
+export declare function plantOpsTheme(mode: ColorMode): ThemeConfig;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAGxC,OAAO,EACL,KAAK,SAAS,EASf,MAAM,UAAU,CAAC;AA+HlB,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,CAE1D"}

package/dist/theme/theme.js

@@ -0,0 +1,141 @@
+/**
+ * The design language of `tokens.ts`, expressed as Ant Design theme configs.
+ *
+ * One place decides what antd looks like across every PlantOps console. A
+ * screen that needs a colour asks antd for its token (`theme.useToken()`) or
+ * imports from `tokens.ts`; it never writes a hex literal, because the value
+ * that is correct in light mode is wrong in dark mode and a literal cannot know
+ * which one is showing.
+ *
+ * ## Why `cssVar` is on
+ *
+ * With CSS-variable mode antd emits `--ant-color-primary: …` once and every
+ * component references the variable, so switching colour mode re-paints from a
+ * single `:root` rule instead of re-serialising the whole style sheet. That is
+ * what makes the mode toggle instant, and it also keeps the server-rendered
+ * style payload small — which matters because these consoles are Next.js apps
+ * that ship their antd styles from the server on first paint.
+ */
+import { theme as antdTheme } from 'antd';
+import { layout, navSurface, neutral, palette, radius, shadow, spacing, typography, } from './tokens';
+/** Tokens that are the same in both modes: type, rhythm, geometry. */
+const sharedTokens = {
+    colorPrimary: palette.primary,
+    colorInfo: palette.info,
+    colorSuccess: palette.success,
+    colorWarning: palette.warning,
+    colorError: palette.error,
+    fontFamily: typography.fontFamily,
+    fontFamilyCode: typography.fontFamilyMono,
+    fontSize: typography.fontSize,
+    fontSizeSM: typography.fontSizeSm,
+    fontSizeLG: typography.fontSizeLg,
+    borderRadius: radius.md,
+    borderRadiusSM: radius.sm,
+    borderRadiusLG: radius.lg,
+    controlHeight: 36,
+    padding: spacing.md,
+    margin: spacing.md,
+    wireframe: false,
+};
+/**
+ * Component overrides shared by both modes.
+ *
+ * Kept to the handful of places where antd's default is wrong *for this
+ * product* rather than merely different from someone's taste: denser tables
+ * because these screens list hundreds of users, a flat navigation surface
+ * because the sidebar supplies its own colours, and a Layout whose header does
+ * not fight the content for attention.
+ */
+const sharedComponents = {
+    Layout: {
+        headerHeight: layout.headerHeight,
+        headerPadding: `0 ${spacing.lg}px`,
+        siderBg: navSurface.background,
+        triggerBg: navSurface.backgroundHover,
+        triggerColor: navSurface.text,
+    },
+    Menu: {
+        itemHeight: 38,
+        itemMarginInline: spacing.xs,
+        itemBorderRadius: radius.md,
+        // The sidebar keeps its dark surface in both colour modes (see tokens.ts).
+        darkItemBg: 'transparent',
+        darkSubMenuItemBg: 'transparent',
+        darkItemColor: navSurface.text,
+        darkItemHoverBg: navSurface.backgroundHover,
+        darkItemHoverColor: navSurface.textSelected,
+        darkItemSelectedBg: navSurface.backgroundSelected,
+        darkItemSelectedColor: navSurface.textSelected,
+        darkPopupBg: navSurface.background,
+    },
+    Table: {
+        headerBorderRadius: 0,
+        cellPaddingBlock: spacing.sm,
+        cellPaddingInline: spacing.md,
+    },
+    Card: {
+        boxShadowTertiary: shadow.card,
+    },
+    Descriptions: {
+        itemPaddingBottom: spacing.sm,
+    },
+    Form: {
+        itemMarginBottom: spacing.md,
+    },
+};
+const lightTheme = {
+    algorithm: antdTheme.defaultAlgorithm,
+    cssVar: {},
+    hashed: true,
+    token: {
+        ...sharedTokens,
+        colorBgLayout: neutral[100],
+        colorBgContainer: neutral[0],
+        colorBgElevated: neutral[0],
+        colorBorder: neutral[300],
+        colorBorderSecondary: neutral[200],
+        colorText: neutral[800],
+        colorTextSecondary: neutral[600],
+        colorTextTertiary: neutral[500],
+        colorTextQuaternary: neutral[400],
+        boxShadowSecondary: shadow.popup,
+    },
+    components: {
+        ...sharedComponents,
+        Layout: {
+            ...sharedComponents?.Layout,
+            headerBg: neutral[0],
+            bodyBg: neutral[100],
+        },
+    },
+};
+const darkTheme = {
+    algorithm: antdTheme.darkAlgorithm,
+    cssVar: {},
+    hashed: true,
+    token: {
+        ...sharedTokens,
+        colorBgLayout: neutral[950],
+        colorBgContainer: neutral[900],
+        colorBgElevated: neutral[800],
+        colorBorder: '#2A3538',
+        colorBorderSecondary: '#1F292C',
+        colorText: '#E4EAEC',
+        colorTextSecondary: '#A9B5B9',
+        colorTextTertiary: '#7E8C91',
+        boxShadowSecondary: '0 6px 16px rgba(0, 0, 0, 0.45)',
+    },
+    components: {
+        ...sharedComponents,
+        Layout: {
+            ...sharedComponents?.Layout,
+            headerBg: neutral[900],
+            bodyBg: neutral[950],
+        },
+    },
+};
+/** The antd theme for a colour mode. The only way to obtain one. */
+export function plantOpsTheme(mode) {
+    return mode === 'dark' ? darkTheme : lightTheme;
+}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,130 @@
+/**
+ * The PlantOps design language, as raw values (Doc 09 preamble).
+ *
+ * Doc 09 mandates no component library and leaves visuals to "the project's
+ * design language" — this file *is* that design language, written down once so
+ * that `admin-web`, and the gatepass and visitor consoles that follow it, are
+ * recognisably the same product rather than three applications that happen to
+ * share an API.
+ *
+ * Everything here is a plain value, not an Ant Design concept. {@link theme.ts}
+ * translates them into an antd `ThemeConfig`; a chart, an email template or a
+ * future non-antd surface can read the same numbers without importing antd.
+ *
+ * ## The palette, and why it is this one
+ *
+ * PlantOps administers industrial sites — plants, gates, departments, shift
+ * supervisors. Two things follow. First, the interface is used for long
+ * stretches on cheap monitors in bright rooms, so the neutrals are cool slates
+ * with real contrast rather than the low-contrast greys that photograph well on
+ * a designer's laptop. Second, and more importantly: **red, amber and green
+ * already mean something on a plant floor**. Reserving them for status is not a
+ * stylistic preference here, it is the reason the brand colour is a deep teal.
+ * A primary button must never be mistakable for a running/fault indicator.
+ */
+/**
+ * Brand and status colours.
+ *
+ * `primary` is the only decorative colour in the set; the other four are
+ * semantic and must not be borrowed for emphasis, per the note above.
+ */
+export declare const palette: {
+    /** Deep teal — brand, primary actions, active navigation. */
+    readonly primary: "#0E7C66";
+    /** Hover/active step of the primary ramp, used where antd wants a lighter one. */
+    readonly primaryHover: "#12977C";
+    /** Tint behind selected rows and active menu items. */
+    readonly primarySoft: "#E6F4F0";
+    /** Informational, never a call to action. */
+    readonly info: "#1668DC";
+    /** Completed, healthy, active. */
+    readonly success: "#2F9E44";
+    /** Degraded, expiring, needs attention — locked accounts, expiring bindings. */
+    readonly warning: "#D48806";
+    /** Failed, denied, revoked. */
+    readonly error: "#CF3B33";
+};
+/**
+ * Neutrals, coolest to warmest-lightest.
+ *
+ * The console's dark surfaces (the sidebar, the dark colour mode) come from the
+ * `900`–`700` end; page chrome from `100`–`300`.
+ */
+export declare const neutral: {
+    readonly 0: "#FFFFFF";
+    readonly 50: "#F7F9F9";
+    readonly 100: "#EFF2F3";
+    readonly 200: "#E1E6E8";
+    readonly 300: "#CBD3D6";
+    readonly 400: "#9AA7AC";
+    readonly 500: "#6C7A80";
+    readonly 600: "#4C585D";
+    readonly 700: "#333D41";
+    readonly 800: "#1E2629";
+    readonly 900: "#121A1C";
+    readonly 950: "#0B1113";
+};
+/**
+ * The navigation surface, in both colour modes.
+ *
+ * Held apart from {@link neutral} because the sidebar is intentionally dark in
+ * *both* modes: it is the one region whose appearance should not change when a
+ * user flips the theme, so that muscle memory for "where the menu is" survives.
+ */
+export declare const navSurface: {
+    readonly background: "#121A1C";
+    readonly backgroundHover: "#1B2528";
+    readonly backgroundSelected: "#14342E";
+    readonly text: "#B7C2C6";
+    readonly textSelected: "#FFFFFF";
+    readonly border: "#1F292C";
+};
+/**
+ * Typography.
+ *
+ * Inter when the host page provides it, then the platform UI stack. The lib
+ * deliberately loads no webfont: a shared component library that injects a
+ * network request into every consuming app is a decision each app should make
+ * for itself.
+ */
+export declare const typography: {
+    readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+    readonly fontFamilyMono: "'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    /** Body size. 14 is antd's default and the right density for admin tables. */
+    readonly fontSize: 14;
+    readonly fontSizeSm: 12;
+    readonly fontSizeLg: 16;
+    readonly fontSizeHeading: 20;
+};
+/** A 4px rhythm. Every gap, pad and inset in the library is one of these. */
+export declare const spacing: {
+    readonly xxs: 4;
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 48;
+};
+export declare const radius: {
+    readonly sm: 4;
+    readonly md: 6;
+    readonly lg: 10;
+    readonly pill: 999;
+};
+/** Fixed chrome dimensions the shell and its consumers agree on. */
+export declare const layout: {
+    readonly headerHeight: 56;
+    readonly sidebarWidth: 248;
+    readonly sidebarCollapsedWidth: 64;
+    /** Maximum width of a reading-oriented page body (forms, detail panels). */
+    readonly contentMaxWidth: 1440;
+};
+/** The elevation steps used by cards, dropdowns and drawers. */
+export declare const shadow: {
+    readonly card: "0 1px 2px rgba(11, 17, 19, 0.04), 0 1px 3px rgba(11, 17, 19, 0.06)";
+    readonly popup: "0 6px 16px rgba(11, 17, 19, 0.12), 0 3px 6px rgba(11, 17, 19, 0.08)";
+};
+/** The two colour modes the theme is defined for. */
+export type ColorMode = 'light' | 'dark';
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAClB,6DAA6D;;IAE7D,kFAAkF;;IAElF,uDAAuD;;IAGvD,6CAA6C;;IAE7C,kCAAkC;;IAElC,gFAAgF;;IAEhF,+BAA+B;;CAEvB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAaV,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;;;IAKrB,8EAA8E;;;;;CAKtE,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,OAAO;;;;;;;;CAQV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,oEAAoE;AACpE,eAAO,MAAM,MAAM;;;;IAIjB,4EAA4E;;CAEpE,CAAC;AAEX,gEAAgE;AAChE,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/dist/theme/tokens.js

@@ -0,0 +1,127 @@
+/**
+ * The PlantOps design language, as raw values (Doc 09 preamble).
+ *
+ * Doc 09 mandates no component library and leaves visuals to "the project's
+ * design language" — this file *is* that design language, written down once so
+ * that `admin-web`, and the gatepass and visitor consoles that follow it, are
+ * recognisably the same product rather than three applications that happen to
+ * share an API.
+ *
+ * Everything here is a plain value, not an Ant Design concept. {@link theme.ts}
+ * translates them into an antd `ThemeConfig`; a chart, an email template or a
+ * future non-antd surface can read the same numbers without importing antd.
+ *
+ * ## The palette, and why it is this one
+ *
+ * PlantOps administers industrial sites — plants, gates, departments, shift
+ * supervisors. Two things follow. First, the interface is used for long
+ * stretches on cheap monitors in bright rooms, so the neutrals are cool slates
+ * with real contrast rather than the low-contrast greys that photograph well on
+ * a designer's laptop. Second, and more importantly: **red, amber and green
+ * already mean something on a plant floor**. Reserving them for status is not a
+ * stylistic preference here, it is the reason the brand colour is a deep teal.
+ * A primary button must never be mistakable for a running/fault indicator.
+ */
+/**
+ * Brand and status colours.
+ *
+ * `primary` is the only decorative colour in the set; the other four are
+ * semantic and must not be borrowed for emphasis, per the note above.
+ */
+export const palette = {
+    /** Deep teal — brand, primary actions, active navigation. */
+    primary: '#0E7C66',
+    /** Hover/active step of the primary ramp, used where antd wants a lighter one. */
+    primaryHover: '#12977C',
+    /** Tint behind selected rows and active menu items. */
+    primarySoft: '#E6F4F0',
+    /** Informational, never a call to action. */
+    info: '#1668DC',
+    /** Completed, healthy, active. */
+    success: '#2F9E44',
+    /** Degraded, expiring, needs attention — locked accounts, expiring bindings. */
+    warning: '#D48806',
+    /** Failed, denied, revoked. */
+    error: '#CF3B33',
+};
+/**
+ * Neutrals, coolest to warmest-lightest.
+ *
+ * The console's dark surfaces (the sidebar, the dark colour mode) come from the
+ * `900`–`700` end; page chrome from `100`–`300`.
+ */
+export const neutral = {
+    0: '#FFFFFF',
+    50: '#F7F9F9',
+    100: '#EFF2F3',
+    200: '#E1E6E8',
+    300: '#CBD3D6',
+    400: '#9AA7AC',
+    500: '#6C7A80',
+    600: '#4C585D',
+    700: '#333D41',
+    800: '#1E2629',
+    900: '#121A1C',
+    950: '#0B1113',
+};
+/**
+ * The navigation surface, in both colour modes.
+ *
+ * Held apart from {@link neutral} because the sidebar is intentionally dark in
+ * *both* modes: it is the one region whose appearance should not change when a
+ * user flips the theme, so that muscle memory for "where the menu is" survives.
+ */
+export const navSurface = {
+    background: neutral[900],
+    backgroundHover: '#1B2528',
+    backgroundSelected: '#14342E',
+    text: '#B7C2C6',
+    textSelected: '#FFFFFF',
+    border: '#1F292C',
+};
+/**
+ * Typography.
+ *
+ * Inter when the host page provides it, then the platform UI stack. The lib
+ * deliberately loads no webfont: a shared component library that injects a
+ * network request into every consuming app is a decision each app should make
+ * for itself.
+ */
+export const typography = {
+    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    fontFamilyMono: "'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+    /** Body size. 14 is antd's default and the right density for admin tables. */
+    fontSize: 14,
+    fontSizeSm: 12,
+    fontSizeLg: 16,
+    fontSizeHeading: 20,
+};
+/** A 4px rhythm. Every gap, pad and inset in the library is one of these. */
+export const spacing = {
+    xxs: 4,
+    xs: 8,
+    sm: 12,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+};
+export const radius = {
+    sm: 4,
+    md: 6,
+    lg: 10,
+    pill: 999,
+};
+/** Fixed chrome dimensions the shell and its consumers agree on. */
+export const layout = {
+    headerHeight: 56,
+    sidebarWidth: 248,
+    sidebarCollapsedWidth: 64,
+    /** Maximum width of a reading-oriented page body (forms, detail panels). */
+    contentMaxWidth: 1440,
+};
+/** The elevation steps used by cards, dropdowns and drawers. */
+export const shadow = {
+    card: '0 1px 2px rgba(11, 17, 19, 0.04), 0 1px 3px rgba(11, 17, 19, 0.06)',
+    popup: '0 6px 16px rgba(11, 17, 19, 0.12), 0 3px 6px rgba(11, 17, 19, 0.08)',
+};