/** * Design tokens - the single source of truth for the Octopus UI theme. * * Tokens are framework-agnostic constants. The MUI theme (`src/theme`) consumes * these to produce `darkTheme` / `lightTheme`. Stories and docs render directly * from tokens so the documentation can never drift from the implementation. */ export * from './colors'; export * from './surfaceScopes'; export * from './attackPath'; export * from './chart'; export * from './spacing'; export * from './radius'; export * from './shadows'; export * from './typography'; export * from './zIndex'; export * from './sizes'; /** Aggregate token object for convenient access and registry generation. */ export declare const tokens: { readonly colors: { readonly text: { readonly primary: "#EDEDED"; readonly secondary: "#C9C9C9"; readonly tertiary: "#A3A3A3"; readonly subtle: "#909090"; readonly muted: "#7C7C7C"; readonly tooltip: "#EDEDED"; readonly disabled: "#5E5E5E"; readonly link: "#74A2FF"; }; readonly background: { readonly page: "#191919"; readonly primary: "#1F1F1F"; readonly widget: "#262626"; readonly surface: "#2E2E2E"; readonly raised: "#333333"; readonly overlay: "#3A3A3A"; readonly tableDivider: "#262626"; readonly darkGreen: "#182724"; readonly border: "#2F2F2F"; readonly borderSubtle: "#272727"; readonly cardBorder: "#414141"; }; readonly backgroundUsage: { readonly page: { readonly hex: "#191919"; readonly label: "Page (rung 0)"; readonly useFor: "The app shell, and bands that should recess below the body such as a table header. No longer pure black, so that a field on the shell has a rung to recess into."; readonly examples: readonly ["App shell background", "Table header band", "Area behind primary surfaces"]; }; readonly primary: { readonly hex: "#1F1F1F"; readonly label: "Primary (rung 1)"; readonly useFor: "Primary content background for a page or section, the recessed fill for a field hosted on a widget, and the unscoped table body / user chat bubble."; readonly examples: readonly ["Page body", "Main content area", "Input inside a card", "User chatbox"]; }; readonly widget: { readonly hex: "#262626"; readonly label: "Widget (rung 2)"; readonly useFor: "Widget / card surfaces sitting on the primary background. The rung most body text sits on, and what the text ramp is measured against."; readonly examples: readonly ["Cards", "Dashboard widgets", "Panels"]; }; readonly surface: { readonly hex: "#2E2E2E"; readonly label: "Surface (rung 3) — Pop-up / Filter / Side Panel / AI chat"; readonly useFor: "Elevated overlays and side panels that sit above content. From this rung up, quiet text must use `tertiary` rather than `subtle`."; readonly examples: readonly ["Dialogs and pop-ups", "Filter panels", "Side panels", "AI chat surface"]; }; readonly raised: { readonly hex: "#333333"; readonly label: "Raised (rung 4)"; readonly useFor: "Elements floating above an overlay, and portalled elements that cannot inherit a rung from the DOM."; readonly examples: readonly ["Tooltips", "Snackbars", "A menu opened from a popover"]; }; readonly overlay: { readonly hex: "#3A3A3A"; readonly label: "Overlay (rung 5, the ceiling)"; readonly useFor: "The top of the ladder. Reaching it means three levels of containment; a fourth is clamped here rather than continuing to lighten."; readonly examples: readonly ["A dialog opened from a dialog", "A menu inside a drawer"]; }; readonly tableDivider: { readonly hex: "#262626"; readonly label: "Table Divider"; readonly useFor: "The rule between table rows. Subtler than `border` so the outline still reads."; readonly examples: readonly ["Row separator"]; }; readonly darkGreen: { readonly hex: "#182724"; readonly label: "Dark Green"; readonly useFor: "Subtle success-tinted surface for positive emphasis."; readonly examples: readonly ["Success-tinted panels", "Attack-path success emphasis"]; }; }; readonly input: { readonly background: "#191919"; readonly border: "#2F2F2F"; readonly borderHover: "#3A3A3A"; readonly focusRing: "#2F2F2F"; readonly errorBorder: "#EB2D36"; }; readonly lightText: { readonly primary: "#1A1A1A"; readonly secondary: "#3D3D3D"; readonly tertiary: "#5C5C5C"; readonly subtle: "#6E6E6E"; readonly muted: "#8A8A8A"; readonly disabled: "#ABABAB"; readonly link: "#0B5FCC"; readonly highlight: "#00786B"; readonly tooltip: "#F1F1F1"; }; readonly lightBackground: { readonly page: "#E9E9E9"; readonly primary: "#F1F1F1"; readonly widget: "#F8F8F8"; readonly surface: "#FCFCFC"; readonly raised: "#FFFFFF"; readonly overlay: "#FFFFFF"; readonly tableDivider: "#E2E2E2"; readonly borderSubtle: "#E2E2E2"; readonly border: "#D4D4D4"; readonly cardBorder: "#BDBDBD"; readonly tintGreen: "#E8F2EF"; }; readonly lightInput: { readonly background: "#E9E9E9"; readonly border: "#D4D4D4"; readonly borderHover: "#ADADAD"; readonly focusRing: "#1A1A1A"; readonly errorBorder: "#C41B23"; }; readonly status: { readonly success: "#199F0F"; readonly failure: "#EB2D36"; readonly warning: "#E99C16"; readonly info: "#1266CC"; readonly general: "#00C4AC"; }; readonly severity: { readonly critical: "#c80009"; readonly high: "#EB2D36"; readonly medium: "#E99C16"; readonly low: "#D0C800"; readonly info: "#1266CC"; readonly untriaged: "#C0C0C0"; }; readonly severityText: { readonly critical: "#E68A8E"; readonly high: "#F38287"; readonly medium: "#E99C16"; readonly low: "#D0C800"; readonly info: "#76A6E1"; readonly untriaged: "#C0C0C0"; }; readonly icon: { readonly success: "#199F0F"; readonly failure: "#EB2D36"; readonly warning: "#E99C16"; readonly info: "#1266CC"; readonly general: "#00C4AC"; readonly tabIcon: "#888888"; readonly actionActive: "#FFFFFF"; readonly inactiveToggle: "#D3D3D3"; readonly activeTabIcon: "#00C4AC"; readonly alert: "#EF073A"; readonly vulnerability: "#EA5515"; readonly attackPathDefault: "#FFFFFF"; readonly attackPathSuccess: "#199F0F"; readonly attackPathFailure: "#EB2D36"; }; readonly neutral: { readonly 0: "#000000"; readonly 900: "#141414"; readonly 850: "#171717"; readonly 800: "#191919"; readonly 700: "#242424"; readonly 600: "#2B2B2B"; readonly 500: "#363636"; readonly 400: "#5E5E5E"; readonly 300: "#888888"; readonly 200: "#AEAEAE"; readonly 100: "#D3D3D3"; readonly 50: "#FDFDFD"; readonly white: "#FFFFFF"; }; readonly brand: { readonly main: "#00C4AC"; }; readonly brandTintByRung: { readonly page: "#152F2C"; readonly primary: "#1B3532"; readonly widget: "#223C39"; readonly surface: "#2A4441"; readonly raised: "#2F4946"; readonly overlay: "#334A47"; }; readonly scrim: { readonly menu: 0.32; readonly drawer: 0.5; readonly dialog: 0.6; readonly loading: 0.4; }; readonly stateAlpha: { readonly hover: 0.06; readonly selected: 0.12; readonly pressed: 0.16; readonly focus: 0.12; readonly disabled: 0.38; }; }; readonly attackPath: { readonly nodes: { readonly impacted: { readonly label: "Impacted"; readonly stroke: "#BA1358"; readonly fill: "#BA1358"; }; readonly host: { readonly label: "Host"; readonly stroke: "#36C5F0"; readonly fill: "#103B48"; }; readonly role: { readonly label: "Role"; readonly stroke: "#C8511B"; readonly fill: "#4E2A1A"; }; readonly policy: { readonly label: "Policy"; readonly stroke: "#3F8624"; readonly fill: "#26351F"; }; readonly action: { readonly label: "Action"; readonly stroke: "#D3D3D3"; readonly fill: "#363636"; }; readonly resource: { readonly label: "Resource"; readonly stroke: "#12264D"; readonly fill: "#3D7FFF"; }; }; readonly order: ("impacted" | "host" | "role" | "policy" | "action" | "resource")[]; }; /** Per-mode data-visualisation palettes. See `tokens/chart.ts`. */ readonly chart: Record; readonly spacing: { readonly none: 0; readonly xxs: 2; readonly xs: 4; readonly sm: 8; readonly md: 16; readonly lg: 24; readonly xl: 32; readonly xxl: 48; readonly xxxl: 64; }; readonly spacingUnit: 8; readonly radius: { readonly none: 0; readonly sm: 4; readonly md: 8; readonly lg: 12; readonly xl: 24; readonly pill: 9999; }; readonly baseRadius: 4; readonly shadows: { readonly none: "none"; readonly xs: "0px 2px 2px 0px rgba(0,0,0,0.05)"; readonly sm: "0px 2px 4px 0px rgba(0,0,0,0.20)"; readonly md: "0px 4px 8px 0px rgba(0,0,0,0.28)"; readonly lg: "0px 8px 16px 0px rgba(0,0,0,0.36)"; readonly xl: "0px 16px 32px 0px rgba(0,0,0,0.44)"; }; readonly typography: { readonly fontFamily: { readonly primary: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"; readonly ui: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"; readonly mono: "Menlo, Monaco, \"SF Mono\", \"Liberation Mono\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", Consolas, \"Lucida Console\", \"Courier New\", monospace"; }; readonly fontWeight: { readonly thin: 100; readonly extraLight: 200; readonly light: 300; readonly regular: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; readonly extraBold: 800; readonly black: 900; }; readonly fontStyle: { readonly normal: "normal"; readonly italic: "italic"; }; readonly fontFeatureSettings: { readonly default: "'liga' 1, 'calt' 1"; readonly tabularNums: "'tnum' 1"; readonly slashedZero: "'zero' 1"; readonly dataDisplay: "'tnum' 1, 'zero' 1, 'liga' 1, 'calt' 1"; }; readonly fontSize: { readonly xs: 11; readonly sm: 12; readonly md: 14; readonly lg: 16; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 32; readonly '4xl': 48; readonly '5xl': 64; }; readonly lineHeight: { readonly tight: 1.2; readonly normal: 1.4; readonly relaxed: 1.6; }; readonly letterSpacing: { readonly tight: "-0.01em"; readonly normal: "0"; readonly wide: "0.02em"; }; }; readonly zIndex: { readonly hide: -1; readonly base: 0; readonly docked: 10; readonly sticky: 1100; readonly appBar: 1100; readonly banner: 1150; readonly overlay: 1200; readonly drawer: 1200; readonly modal: 1300; readonly popover: 1400; readonly snackbar: 1400; readonly tooltip: 1500; }; readonly drawerWidths: { readonly sm: 380; readonly md: 430; readonly lg: 560; readonly xl: 660; readonly full: 954; }; readonly controlHeights: { readonly small: 28; readonly medium: 36; readonly large: 44; }; readonly chipHeights: { readonly small: 22; readonly medium: 28; readonly large: 36; readonly extraLarge: 44; }; }; export type Tokens = typeof tokens;