RamEx-Flow / front /src /styles /theme.css
zdy10046's picture
add backend code
57528c5
Raw
History Blame Contribute Delete
1.41 kB
/**
* Observable HQ–inspired theme: monochrome, sharp corners, editorial feel.
* Layout unchanged; colors and surfaces only.
*/
:root {
/* Surfaces */
--ramex-bg: #ffffff;
--ramex-bg-subtle: #f6f6f6;
--ramex-bg-muted: #ebebeb;
--ramex-bg-page: #fafafa;
/* Text */
--ramex-text: #1a1a1a;
--ramex-text-secondary: #5c5c5c;
--ramex-text-muted: #8a8a8a;
/* Borders & chrome */
--ramex-border: #d4d4d4;
--ramex-border-strong: #1a1a1a;
--ramex-divider: #e5e5e5;
/* Page grid (Observable-style) */
--ramex-grid-line: rgba(0, 0, 0, 0.09);
--ramex-grid-size: 24px;
/* Actions (black primary, Observable uses minimal color in UI) */
--ramex-accent: #1a1a1a;
--ramex-accent-hover: #333333;
--ramex-accent-muted: rgba(26, 26, 26, 0.08);
/* Data viz accent (Observable Plot blue — charts only) */
--ramex-chart: #4269d0;
--ramex-chart-alt: #efb118;
/* Semantic */
--ramex-danger: #c41e3a;
--ramex-success: #2d6a4f;
/* Radius: sharp / near-square */
--ramex-radius: 0;
--ramex-radius-sm: 2px;
/* Shadows: flat, border-led */
--ramex-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.06);
--ramex-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
/* Typography */
--ramex-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ramex-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
}