jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
1f92f0593fc862f047013a1201d65ae465fc7e87
homarr/src/styles/orchis/variables.css
Kaloyan Danchev 83a8546521
Some checks failed
Master CI / yarn_install_and_build (push) Has been cancelled
Details
Add Unraid API integration and Orchis theme 
Phase 1: Foundation Setup
- Create Unraid GraphQL client with type-safe queries/mutations
- Add comprehensive TypeScript types for all Unraid data models
- Implement tRPC router with 30+ endpoints for Unraid management
- Add environment variables for Unraid connection

Phase 2: Core Dashboard
- Create SystemInfoCard component (CPU, RAM, OS, motherboard)
- Create ArrayCard component (disks, parity, cache pools)
- Create DockerCard component with start/stop controls
- Create VmsCard component with power management
- Add main Unraid dashboard page with real-time updates

Phase 3: Orchis Theme Integration
- Create Mantine theme override with Orchis design tokens
- Add CSS custom properties for light/dark modes
- Configure shadows, spacing, radius from Orchis specs
- Style all Mantine components with Orchis patterns

Files added:
- src/lib/unraid/* (GraphQL client, types, queries)
- src/server/api/routers/unraid/* (tRPC router)
- src/components/Unraid/* (Dashboard components)
- src/pages/unraid/* (Dashboard page)
- src/styles/orchis/* (Theme configuration)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-06 09:19:21 +02:00

156 lines
5.3 KiB
CSS
Raw Blame History

/**
* Orchis Theme CSS Variables
* Based on the Orchis GTK Theme by vinceliuice
* https://github.com/vinceliuice/Orchis-theme
*/
:root {
/* ---- Primary / Accent ---- */
--orchis-primary: #1A73E8;
--orchis-primary-light: #3281EA;
--orchis-on-primary: #FFFFFF;
--orchis-on-primary-secondary: rgba(255, 255, 255, 0.7);
/* ---- Backgrounds (Light Mode) ---- */
--orchis-background: #F2F2F2;
--orchis-surface: #FFFFFF;
--orchis-base: #FFFFFF;
--orchis-base-alt: #FAFAFA;
/* ---- Text (Light Mode) ---- */
--orchis-text: rgba(0, 0, 0, 0.87);
--orchis-text-secondary: rgba(0, 0, 0, 0.6);
--orchis-text-disabled: rgba(0, 0, 0, 0.38);
/* ---- Semantic Colors ---- */
--orchis-error: #E53935;
--orchis-warning: #FFD600;
--orchis-success: #0F9D58;
--orchis-info: #1A73E8;
--orchis-link: #1A73E8;
--orchis-link-visited: #AB47BC;
/* ---- Borders ---- */
--orchis-border: rgba(0, 0, 0, 0.12);
--orchis-border-solid: #E2E2E2;
--orchis-divider: rgba(0, 0, 0, 0.12);
/* ---- Overlay States ---- */
--orchis-overlay-hover: rgba(0, 0, 0, 0.08);
--orchis-overlay-focus: rgba(0, 0, 0, 0.08);
--orchis-overlay-active: rgba(0, 0, 0, 0.12);
--orchis-overlay-checked: rgba(0, 0, 0, 0.10);
--orchis-overlay-selected: rgba(0, 0, 0, 0.06);
/* ---- Track / Fill ---- */
--orchis-track: rgba(0, 0, 0, 0.26);
--orchis-track-disabled: rgba(0, 0, 0, 0.15);
--orchis-fill: rgba(0, 0, 0, 0.04);
--orchis-secondary-fill: rgba(0, 0, 0, 0.08);
/* ---- Tooltip ---- */
--orchis-tooltip-bg: rgba(0, 0, 0, 0.9);
/* ---- Titlebar / Sidebar ---- */
--orchis-titlebar: #FFFFFF;
--orchis-titlebar-backdrop: #FAFAFA;
--orchis-sidebar: #FAFAFA;
/* ---- Window Buttons ---- */
--orchis-btn-close: #fd5f51;
--orchis-btn-maximize: #38c76a;
--orchis-btn-minimize: #fdbe04;
/* ---- Typography ---- */
--orchis-font-family: "M+ 1c", Roboto, Cantarell, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--orchis-font-size: 14px;
--orchis-font-weight-button: 500;
/* ---- Spacing ---- */
--orchis-space: 6px;
--orchis-space-xs: 2px;
--orchis-space-sm: 4px;
--orchis-space-md: 6px;
--orchis-space-lg: 12px;
--orchis-space-xl: 18px;
--orchis-space-xxl: 24px;
/* ---- Border Radius ---- */
--orchis-radius: 12px;
--orchis-radius-window: 18px;
--orchis-radius-corner: 12px;
--orchis-radius-menu: 11px;
--orchis-radius-card: 11px;
--orchis-radius-tooltip: 6px;
--orchis-radius-menuitem: 5px;
--orchis-radius-circular: 9999px;
/* ---- Shadows ---- */
--orchis-shadow-z1: 0 2px 2px -2px rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.24), 0 1px 2px -1px rgba(0,0,0,0.17);
--orchis-shadow-z2: 0 3px 2px -3px rgba(0,0,0,0.3), 0 2px 2px -1px rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.12);
--orchis-shadow-z3: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
--orchis-shadow-z4: 0 2px 2px -1px rgba(0,0,0,0.2), 0 4px 4px 0 rgba(0,0,0,0.14), 0 1px 6px 0 rgba(0,0,0,0.12);
--orchis-shadow-z6: 0 3px 3px -1px rgba(0,0,0,0.2), 0 6px 6px 0 rgba(0,0,0,0.14), 0 1px 11px 0 rgba(0,0,0,0.12);
--orchis-shadow-z8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 8px 1px rgba(0,0,0,0.14), 0 3px 9px 2px rgba(0,0,0,0.12);
--orchis-shadow-z12: 0 7px 7px -4px rgba(0,0,0,0.2), 0 12px 12px 2px rgba(0,0,0,0.14), 0 5px 13px 4px rgba(0,0,0,0.12);
--orchis-shadow-z16: 0 8px 6px -5px rgba(0,0,0,0.2), 0 16px 16px 2px rgba(0,0,0,0.14), 0 6px 18px 5px rgba(0,0,0,0.12);
--orchis-shadow-z24: 0 11px 11px -7px rgba(0,0,0,0.2), 0 24px 24px 3px rgba(0,0,0,0.14), 0 9px 28px 8px rgba(0,0,0,0.12);
/* ---- Transitions ---- */
--orchis-duration: 75ms;
--orchis-duration-short: 150ms;
--orchis-duration-ripple: 225ms;
--orchis-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--orchis-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--orchis-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
--orchis-transition: all 75ms cubic-bezier(0.0, 0.0, 0.2, 1);
/* ---- Component Sizes ---- */
--orchis-size-small: 24px;
--orchis-size-medium: 36px;
--orchis-size-large: 48px;
--orchis-icon-size: 16px;
--orchis-icon-size-md: 24px;
--orchis-icon-size-lg: 32px;
--orchis-bar-size: 6px;
}
/* ---- Dark Mode Overrides ---- */
[data-mantine-color-scheme="dark"],
.mantine-ColorScheme-root[data-mantine-color-scheme="dark"] {
--orchis-primary: #3281EA;
--orchis-background: #212121;
--orchis-surface: #3C3C3C;
--orchis-base: #2C2C2C;
--orchis-base-alt: #242424;
--orchis-text: #FFFFFF;
--orchis-text-secondary: rgba(255, 255, 255, 0.7);
--orchis-text-disabled: rgba(255, 255, 255, 0.5);
--orchis-error: #F44336;
--orchis-warning: #FBC02D;
--orchis-success: #81C995;
--orchis-link: #3281EA;
--orchis-link-visited: #BA68C8;
--orchis-border: rgba(255, 255, 255, 0.12);
--orchis-border-solid: #3D3D3D;
--orchis-divider: rgba(255, 255, 255, 0.12);
--orchis-overlay-hover: rgba(255, 255, 255, 0.08);
--orchis-overlay-focus: rgba(255, 255, 255, 0.08);
--orchis-overlay-active: rgba(255, 255, 255, 0.12);
--orchis-overlay-checked: rgba(255, 255, 255, 0.10);
--orchis-overlay-selected: rgba(255, 255, 255, 0.06);
--orchis-track: rgba(255, 255, 255, 0.3);
--orchis-track-disabled: rgba(255, 255, 255, 0.15);
--orchis-fill: rgba(255, 255, 255, 0.04);
--orchis-secondary-fill: rgba(255, 255, 255, 0.08);
--orchis-titlebar: #2C2C2C;
--orchis-titlebar-backdrop: #3C3C3C;
--orchis-sidebar: #242424;
}
Reference in New Issue View Git Blame Copy Permalink