mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-02 20:43:36 +00:00
refactor: replace fs with secureFs for improved file handling
This commit updates various modules to utilize the secure file system operations from the secureFs module instead of the native fs module. Key changes include: - Replaced fs imports with secureFs in multiple route handlers and services to enhance security and consistency in file operations. - Added centralized validation for working directories in the sdk-options module to ensure all AI model invocations are secure. These changes aim to improve the security and maintainability of file handling across the application.
This commit is contained in:
Test User
@@ -1,6 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
/* Dark themes */
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@custom-variant retro (&:is(.retro *));
|
||||
@custom-variant dracula (&:is(.dracula *));
|
||||
@@ -13,9 +14,27 @@
|
||||
@custom-variant onedark (&:is(.onedark *));
|
||||
@custom-variant synthwave (&:is(.synthwave *));
|
||||
@custom-variant red (&:is(.red *));
|
||||
@custom-variant cream (&:is(.cream *));
|
||||
@custom-variant sunset (&:is(.sunset *));
|
||||
@custom-variant gray (&:is(.gray *));
|
||||
@custom-variant forest (&:is(.forest *));
|
||||
@custom-variant ocean (&:is(.ocean *));
|
||||
|
||||
/* Light themes */
|
||||
@custom-variant cream (&:is(.cream *));
|
||||
@custom-variant solarizedlight (&:is(.solarizedlight *));
|
||||
@custom-variant github (&:is(.github *));
|
||||
@custom-variant paper (&:is(.paper *));
|
||||
@custom-variant rose (&:is(.rose *));
|
||||
@custom-variant mint (&:is(.mint *));
|
||||
@custom-variant lavender (&:is(.lavender *));
|
||||
@custom-variant sand (&:is(.sand *));
|
||||
@custom-variant sky (&:is(.sky *));
|
||||
@custom-variant peach (&:is(.peach *));
|
||||
@custom-variant snow (&:is(.snow *));
|
||||
@custom-variant sepia (&:is(.sepia *));
|
||||
@custom-variant gruvboxlight (&:is(.gruvboxlight *));
|
||||
@custom-variant nordlight (&:is(.nordlight *));
|
||||
@custom-variant blossom (&:is(.blossom *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
@@ -201,7 +220,7 @@
|
||||
/* Card and popover backgrounds */
|
||||
--card: oklch(0.14 0 0);
|
||||
--card-foreground: oklch(1 0 0);
|
||||
--popover: oklch(0.10 0 0);
|
||||
--popover: oklch(0.1 0 0);
|
||||
--popover-foreground: oklch(1 0 0);
|
||||
|
||||
/* Brand colors - purple/violet theme */
|
||||
@@ -336,7 +355,6 @@
|
||||
--running-indicator-text: oklch(0.6 0.22 265);
|
||||
}
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
@@ -351,19 +369,19 @@
|
||||
|
||||
/* Ensure all clickable elements show pointer cursor */
|
||||
button:not(:disabled),
|
||||
[role="button"]:not([aria-disabled="true"]),
|
||||
[role='button']:not([aria-disabled='true']),
|
||||
a[href],
|
||||
input[type="button"]:not(:disabled),
|
||||
input[type="submit"]:not(:disabled),
|
||||
input[type="reset"]:not(:disabled),
|
||||
input[type='button']:not(:disabled),
|
||||
input[type='submit']:not(:disabled),
|
||||
input[type='reset']:not(:disabled),
|
||||
select:not(:disabled),
|
||||
[tabindex]:not([tabindex="-1"]):not(:disabled) {
|
||||
[tabindex]:not([tabindex='-1']):not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Disabled elements should show not-allowed cursor */
|
||||
button:disabled,
|
||||
[role="button"][aria-disabled="true"],
|
||||
[role='button'][aria-disabled='true'],
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
textarea:disabled {
|
||||
@@ -372,12 +390,44 @@
|
||||
}
|
||||
|
||||
/* Custom scrollbar for dark themes */
|
||||
:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave, .red, .sunset, .gray) ::-webkit-scrollbar {
|
||||
:is(
|
||||
.dark,
|
||||
.retro,
|
||||
.dracula,
|
||||
.nord,
|
||||
.monokai,
|
||||
.tokyonight,
|
||||
.solarized,
|
||||
.gruvbox,
|
||||
.catppuccin,
|
||||
.onedark,
|
||||
.synthwave,
|
||||
.red,
|
||||
.sunset,
|
||||
.gray
|
||||
)
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave, .red, .sunset, .gray) ::-webkit-scrollbar-track {
|
||||
:is(
|
||||
.dark,
|
||||
.retro,
|
||||
.dracula,
|
||||
.nord,
|
||||
.monokai,
|
||||
.tokyonight,
|
||||
.solarized,
|
||||
.gruvbox,
|
||||
.catppuccin,
|
||||
.onedark,
|
||||
.synthwave,
|
||||
.red,
|
||||
.sunset,
|
||||
.gray
|
||||
)
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
@@ -392,11 +442,11 @@
|
||||
|
||||
/* Retro Scrollbar override */
|
||||
.retro ::-webkit-scrollbar-thumb {
|
||||
background: var(--primary);
|
||||
border-radius: 0;
|
||||
background: var(--primary);
|
||||
border-radius: 0;
|
||||
}
|
||||
.retro ::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* Red theme scrollbar */
|
||||
@@ -518,8 +568,6 @@
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Hover state utilities */
|
||||
.hover-glass {
|
||||
@@ -543,8 +591,6 @@
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Action button utilities */
|
||||
.bg-action-view {
|
||||
background-color: var(--action-view);
|
||||
@@ -588,8 +634,9 @@
|
||||
}
|
||||
|
||||
.shadow-running-indicator\/50 {
|
||||
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--running-indicator), transparent 50%),
|
||||
0 4px 6px -4px color-mix(in oklch, var(--running-indicator), transparent 50%);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in oklch, var(--running-indicator), transparent 50%),
|
||||
0 4px 6px -4px color-mix(in oklch, var(--running-indicator), transparent 50%);
|
||||
}
|
||||
|
||||
.text-running-indicator {
|
||||
@@ -632,132 +679,78 @@
|
||||
|
||||
/* Retro Overrides for Utilities */
|
||||
|
||||
|
||||
|
||||
.retro * {
|
||||
border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Animated Outline Button Styles */
|
||||
.animated-outline-gradient {
|
||||
/* Default gradient - purple to blue */
|
||||
background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
|
||||
/* Default gradient - purple to blue */
|
||||
background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
|
||||
}
|
||||
|
||||
/* Light mode - deeper purple to blue gradient for better visibility */
|
||||
|
||||
|
||||
|
||||
/* Dark mode - purple to blue gradient */
|
||||
|
||||
|
||||
|
||||
/* Retro mode - unique scanline + neon effect */
|
||||
|
||||
@keyframes retro-glow {
|
||||
from {
|
||||
filter: brightness(1) drop-shadow(0 0 2px #00ff41);
|
||||
}
|
||||
to {
|
||||
filter: brightness(1.2) drop-shadow(0 0 8px #00ff41);
|
||||
}
|
||||
from {
|
||||
filter: brightness(1) drop-shadow(0 0 2px #00ff41);
|
||||
}
|
||||
to {
|
||||
filter: brightness(1.2) drop-shadow(0 0 8px #00ff41);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Dracula animated-outline - purple/pink */
|
||||
|
||||
|
||||
|
||||
/* Nord animated-outline - frost blue */
|
||||
|
||||
|
||||
|
||||
/* Monokai animated-outline - pink/yellow */
|
||||
|
||||
|
||||
|
||||
/* Tokyo Night animated-outline - blue/magenta */
|
||||
|
||||
|
||||
|
||||
/* Solarized animated-outline - blue/cyan */
|
||||
|
||||
|
||||
|
||||
/* Gruvbox animated-outline - yellow/orange */
|
||||
|
||||
|
||||
|
||||
/* Catppuccin animated-outline - mauve/pink */
|
||||
|
||||
|
||||
|
||||
/* One Dark animated-outline - blue/magenta */
|
||||
|
||||
|
||||
|
||||
/* Synthwave animated-outline - hot pink/cyan with glow */
|
||||
|
||||
@keyframes synthwave-glow {
|
||||
from {
|
||||
filter: brightness(1) drop-shadow(0 0 3px #f97e72);
|
||||
}
|
||||
to {
|
||||
filter: brightness(1.3) drop-shadow(0 0 10px #ff7edb);
|
||||
}
|
||||
from {
|
||||
filter: brightness(1) drop-shadow(0 0 3px #f97e72);
|
||||
}
|
||||
to {
|
||||
filter: brightness(1.3) drop-shadow(0 0 10px #ff7edb);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Slider Theme Styles */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Dracula slider */
|
||||
|
||||
|
||||
|
||||
/* Nord slider */
|
||||
|
||||
|
||||
|
||||
/* Monokai slider */
|
||||
|
||||
|
||||
|
||||
/* Tokyo Night slider */
|
||||
|
||||
|
||||
|
||||
/* Solarized slider */
|
||||
|
||||
|
||||
|
||||
/* Gruvbox slider */
|
||||
|
||||
|
||||
|
||||
/* Catppuccin slider */
|
||||
|
||||
|
||||
|
||||
/* One Dark slider */
|
||||
|
||||
|
||||
|
||||
/* Synthwave slider */
|
||||
|
||||
|
||||
|
||||
/* Line clamp utilities for text overflow prevention */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
@@ -807,136 +800,28 @@
|
||||
|
||||
/* Light theme - professional and readable */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Dark theme - high contrast */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Retro theme - neon green on black */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Dracula theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Nord theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Monokai theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Tokyo Night theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Solarized theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Gruvbox theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Catppuccin theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* One Dark theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Synthwave theme */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* XML Editor container styles */
|
||||
.xml-editor {
|
||||
position: relative;
|
||||
|
||||
@@ -2,21 +2,39 @@
|
||||
* Bundles all individual theme styles so the build pipeline
|
||||
* doesn't tree-shake their CSS when imported dynamically.
|
||||
*/
|
||||
import "./themes/dark.css";
|
||||
import "./themes/light.css";
|
||||
import "./themes/retro.css";
|
||||
import "./themes/dracula.css";
|
||||
import "./themes/nord.css";
|
||||
import "./themes/monokai.css";
|
||||
import "./themes/tokyonight.css";
|
||||
import "./themes/solarized.css";
|
||||
import "./themes/gruvbox.css";
|
||||
import "./themes/catppuccin.css";
|
||||
import "./themes/onedark.css";
|
||||
import "./themes/synthwave.css";
|
||||
import "./themes/red.css";
|
||||
import "./themes/cream.css";
|
||||
import "./themes/sunset.css";
|
||||
import "./themes/gray.css";
|
||||
|
||||
// Dark themes (16)
|
||||
import './themes/dark.css';
|
||||
import './themes/retro.css';
|
||||
import './themes/dracula.css';
|
||||
import './themes/nord.css';
|
||||
import './themes/monokai.css';
|
||||
import './themes/tokyonight.css';
|
||||
import './themes/solarized.css';
|
||||
import './themes/gruvbox.css';
|
||||
import './themes/catppuccin.css';
|
||||
import './themes/onedark.css';
|
||||
import './themes/synthwave.css';
|
||||
import './themes/red.css';
|
||||
import './themes/sunset.css';
|
||||
import './themes/gray.css';
|
||||
import './themes/forest.css';
|
||||
import './themes/ocean.css';
|
||||
|
||||
// Light themes (16)
|
||||
import './themes/light.css';
|
||||
import './themes/cream.css';
|
||||
import './themes/solarizedlight.css';
|
||||
import './themes/github.css';
|
||||
import './themes/paper.css';
|
||||
import './themes/rose.css';
|
||||
import './themes/mint.css';
|
||||
import './themes/lavender.css';
|
||||
import './themes/sand.css';
|
||||
import './themes/sky.css';
|
||||
import './themes/peach.css';
|
||||
import './themes/snow.css';
|
||||
import './themes/sepia.css';
|
||||
import './themes/gruvboxlight.css';
|
||||
import './themes/nordlight.css';
|
||||
import './themes/blossom.css';
|
||||
|
||||
92
apps/ui/src/styles/themes/blossom.css
Normal file
92
apps/ui/src/styles/themes/blossom.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Blossom Theme - Cherry blossom pink */
|
||||
|
||||
.blossom {
|
||||
--background: oklch(0.98 0.02 330);
|
||||
--background-50: oklch(0.98 0.02 330 / 0.5);
|
||||
--background-80: oklch(0.98 0.02 330 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.04 340);
|
||||
--foreground-secondary: oklch(0.45 0.03 340);
|
||||
--foreground-muted: oklch(0.55 0.025 340);
|
||||
|
||||
--card: oklch(0.99 0.015 330);
|
||||
--card-foreground: oklch(0.25 0.04 340);
|
||||
--popover: oklch(0.99 0.015 330);
|
||||
--popover-foreground: oklch(0.25 0.04 340);
|
||||
|
||||
--primary: oklch(0.65 0.15 340);
|
||||
--primary-foreground: oklch(0.99 0.015 330);
|
||||
--brand-400: oklch(0.7 0.13 340);
|
||||
--brand-500: oklch(0.65 0.15 340);
|
||||
--brand-600: oklch(0.6 0.17 340);
|
||||
|
||||
--secondary: oklch(0.95 0.025 330);
|
||||
--secondary-foreground: oklch(0.25 0.04 340);
|
||||
--muted: oklch(0.94 0.028 330);
|
||||
--muted-foreground: oklch(0.5 0.03 340);
|
||||
--accent: oklch(0.92 0.032 330);
|
||||
--accent-foreground: oklch(0.25 0.04 340);
|
||||
|
||||
--destructive: oklch(0.55 0.2 15);
|
||||
--border: oklch(0.9 0.025 330);
|
||||
--border-glass: oklch(0.65 0.15 340 / 0.15);
|
||||
--input: oklch(0.98 0.018 330);
|
||||
--ring: oklch(0.65 0.15 340);
|
||||
|
||||
--chart-1: oklch(0.65 0.15 340);
|
||||
--chart-2: oklch(0.6 0.15 300);
|
||||
--chart-3: oklch(0.55 0.15 15);
|
||||
--chart-4: oklch(0.6 0.12 350);
|
||||
--chart-5: oklch(0.55 0.1 280);
|
||||
|
||||
--sidebar: oklch(0.97 0.022 330);
|
||||
--sidebar-foreground: oklch(0.25 0.04 340);
|
||||
--sidebar-primary: oklch(0.65 0.15 340);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.015 330);
|
||||
--sidebar-accent: oklch(0.94 0.028 330);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.04 340);
|
||||
--sidebar-border: oklch(0.9 0.025 330);
|
||||
--sidebar-ring: oklch(0.65 0.15 340);
|
||||
|
||||
--action-view: oklch(0.65 0.15 340);
|
||||
--action-view-hover: oklch(0.6 0.17 340);
|
||||
--action-followup: oklch(0.6 0.15 300);
|
||||
--action-followup-hover: oklch(0.55 0.17 300);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.65 0.15 340);
|
||||
--running-indicator-text: oklch(0.6 0.17 340);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 15);
|
||||
--status-error-bg: oklch(0.55 0.2 15 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 230);
|
||||
--status-info-bg: oklch(0.55 0.15 230 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.025 340);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.blossom .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.98 0.02 330),
|
||||
oklch(0.97 0.025 330),
|
||||
oklch(0.98 0.02 330)
|
||||
);
|
||||
}
|
||||
|
||||
.blossom .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #ec4899 0%, #f472b6 50%, #ec4899 100%);
|
||||
}
|
||||
|
||||
.blossom .animated-outline-inner {
|
||||
background: oklch(0.99 0.015 330) !important;
|
||||
color: #ec4899 !important;
|
||||
}
|
||||
98
apps/ui/src/styles/themes/forest.css
Normal file
98
apps/ui/src/styles/themes/forest.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/* Forest Theme - Deep green dark theme */
|
||||
|
||||
.forest {
|
||||
--background: oklch(0.12 0.02 150);
|
||||
--background-50: oklch(0.12 0.02 150 / 0.5);
|
||||
--background-80: oklch(0.12 0.02 150 / 0.8);
|
||||
|
||||
--foreground: oklch(0.95 0.02 150);
|
||||
--foreground-secondary: oklch(0.7 0.03 150);
|
||||
--foreground-muted: oklch(0.6 0.03 150);
|
||||
|
||||
--card: oklch(0.16 0.025 150);
|
||||
--card-foreground: oklch(0.95 0.02 150);
|
||||
--popover: oklch(0.14 0.022 150);
|
||||
--popover-foreground: oklch(0.95 0.02 150);
|
||||
|
||||
--primary: oklch(0.6 0.18 145);
|
||||
--primary-foreground: oklch(0.12 0.02 150);
|
||||
--brand-400: oklch(0.65 0.16 145);
|
||||
--brand-500: oklch(0.6 0.18 145);
|
||||
--brand-600: oklch(0.55 0.2 145);
|
||||
|
||||
--secondary: oklch(1 0 0 / 0.05);
|
||||
--secondary-foreground: oklch(0.95 0.02 150);
|
||||
--muted: oklch(0.2 0.03 150);
|
||||
--muted-foreground: oklch(0.65 0.03 150);
|
||||
--accent: oklch(1 0 0 / 0.08);
|
||||
--accent-foreground: oklch(0.95 0.02 150);
|
||||
|
||||
--destructive: oklch(0.6 0.22 25);
|
||||
--border: oklch(0.25 0.04 150);
|
||||
--border-glass: oklch(1 0 0 / 0.1);
|
||||
--input: oklch(0.14 0.022 150);
|
||||
--ring: oklch(0.6 0.18 145);
|
||||
|
||||
--chart-1: oklch(0.6 0.18 145);
|
||||
--chart-2: oklch(0.65 0.15 100);
|
||||
--chart-3: oklch(0.7 0.12 180);
|
||||
--chart-4: oklch(0.6 0.2 200);
|
||||
--chart-5: oklch(0.55 0.15 50);
|
||||
|
||||
--sidebar: oklch(0.1 0.02 150 / 0.8);
|
||||
--sidebar-foreground: oklch(0.95 0.02 150);
|
||||
--sidebar-primary: oklch(0.6 0.18 145);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.02 150);
|
||||
--sidebar-accent: oklch(1 0 0 / 0.05);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.02 150);
|
||||
--sidebar-border: oklch(1 0 0 / 0.1);
|
||||
--sidebar-ring: oklch(0.6 0.18 145);
|
||||
|
||||
--action-view: oklch(0.6 0.18 145);
|
||||
--action-view-hover: oklch(0.55 0.2 145);
|
||||
--action-followup: oklch(0.6 0.15 180);
|
||||
--action-followup-hover: oklch(0.55 0.17 180);
|
||||
--action-commit: oklch(0.6 0.18 145);
|
||||
--action-commit-hover: oklch(0.55 0.2 145);
|
||||
--action-verify: oklch(0.6 0.18 145);
|
||||
--action-verify-hover: oklch(0.55 0.2 145);
|
||||
|
||||
--running-indicator: oklch(0.6 0.18 145);
|
||||
--running-indicator-text: oklch(0.65 0.16 145);
|
||||
|
||||
--status-success: oklch(0.65 0.18 145);
|
||||
--status-success-bg: oklch(0.65 0.18 145 / 0.2);
|
||||
--status-warning: oklch(0.7 0.15 80);
|
||||
--status-warning-bg: oklch(0.7 0.15 80 / 0.2);
|
||||
--status-error: oklch(0.6 0.22 25);
|
||||
--status-error-bg: oklch(0.6 0.22 25 / 0.2);
|
||||
--status-info: oklch(0.6 0.15 180);
|
||||
--status-info-bg: oklch(0.6 0.15 180 / 0.2);
|
||||
--status-backlog: oklch(0.55 0.03 150);
|
||||
--status-in-progress: oklch(0.7 0.15 80);
|
||||
--status-waiting: oklch(0.65 0.12 60);
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(0, 20, 10, 0.3);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 20, 10, 0.4), 0 1px 2px rgba(0, 20, 10, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 20, 10, 0.4), 0 2px 4px -1px rgba(0, 20, 10, 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 20, 10, 0.4), 0 4px 6px -2px rgba(0, 20, 10, 0.2);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 20, 10, 0.5), 0 10px 10px -5px rgba(0, 20, 10, 0.3);
|
||||
}
|
||||
|
||||
.forest .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.12 0.02 150),
|
||||
oklch(0.15 0.025 150),
|
||||
oklch(0.12 0.02 150)
|
||||
);
|
||||
}
|
||||
|
||||
.forest .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #22c55e 0%, #16a34a 50%, #22c55e 100%);
|
||||
}
|
||||
|
||||
.forest .animated-outline-inner {
|
||||
background: oklch(0.16 0.025 150) !important;
|
||||
color: #86efac !important;
|
||||
}
|
||||
87
apps/ui/src/styles/themes/github.css
Normal file
87
apps/ui/src/styles/themes/github.css
Normal file
@@ -0,0 +1,87 @@
|
||||
/* GitHub Light Theme */
|
||||
|
||||
.github {
|
||||
--background: oklch(0.99 0 0);
|
||||
--background-50: oklch(0.99 0 0 / 0.5);
|
||||
--background-80: oklch(0.99 0 0 / 0.8);
|
||||
|
||||
--foreground: oklch(0.2 0 0);
|
||||
--foreground-secondary: oklch(0.4 0 0);
|
||||
--foreground-muted: oklch(0.55 0 0);
|
||||
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0 0);
|
||||
|
||||
--primary: oklch(0.5 0.15 250);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--brand-400: oklch(0.55 0.13 250);
|
||||
--brand-500: oklch(0.5 0.15 250);
|
||||
--brand-600: oklch(0.45 0.17 250);
|
||||
|
||||
--secondary: oklch(0.96 0 0);
|
||||
--secondary-foreground: oklch(0.2 0 0);
|
||||
--muted: oklch(0.96 0 0);
|
||||
--muted-foreground: oklch(0.45 0 0);
|
||||
--accent: oklch(0.94 0 0);
|
||||
--accent-foreground: oklch(0.2 0 0);
|
||||
|
||||
--destructive: oklch(0.55 0.22 25);
|
||||
--border: oklch(0.88 0 0);
|
||||
--border-glass: oklch(0.2 0 0 / 0.1);
|
||||
--input: oklch(0.98 0 0);
|
||||
--ring: oklch(0.5 0.15 250);
|
||||
|
||||
--chart-1: oklch(0.5 0.15 250);
|
||||
--chart-2: oklch(0.55 0.18 145);
|
||||
--chart-3: oklch(0.6 0.15 45);
|
||||
--chart-4: oklch(0.55 0.15 300);
|
||||
--chart-5: oklch(0.55 0.18 25);
|
||||
|
||||
--sidebar: oklch(0.98 0 0);
|
||||
--sidebar-foreground: oklch(0.2 0 0);
|
||||
--sidebar-primary: oklch(0.5 0.15 250);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.94 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2 0 0);
|
||||
--sidebar-border: oklch(0.88 0 0);
|
||||
--sidebar-ring: oklch(0.5 0.15 250);
|
||||
|
||||
--action-view: oklch(0.5 0.15 250);
|
||||
--action-view-hover: oklch(0.45 0.17 250);
|
||||
--action-followup: oklch(0.55 0.15 230);
|
||||
--action-followup-hover: oklch(0.5 0.17 230);
|
||||
--action-commit: oklch(0.55 0.18 145);
|
||||
--action-commit-hover: oklch(0.5 0.2 145);
|
||||
--action-verify: oklch(0.55 0.18 145);
|
||||
--action-verify-hover: oklch(0.5 0.2 145);
|
||||
|
||||
--running-indicator: oklch(0.5 0.15 250);
|
||||
--running-indicator-text: oklch(0.45 0.17 250);
|
||||
|
||||
--status-success: oklch(0.55 0.18 145);
|
||||
--status-success-bg: oklch(0.55 0.18 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 80);
|
||||
--status-warning-bg: oklch(0.65 0.15 80 / 0.15);
|
||||
--status-error: oklch(0.55 0.22 25);
|
||||
--status-error-bg: oklch(0.55 0.22 25 / 0.15);
|
||||
--status-info: oklch(0.5 0.15 250);
|
||||
--status-info-bg: oklch(0.5 0.15 250 / 0.15);
|
||||
--status-backlog: oklch(0.55 0 0);
|
||||
--status-in-progress: oklch(0.65 0.15 80);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.github .content-bg {
|
||||
background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
|
||||
}
|
||||
|
||||
.github .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #0969da 0%, #1f883d 50%, #0969da 100%);
|
||||
}
|
||||
|
||||
.github .animated-outline-inner {
|
||||
background: oklch(1 0 0) !important;
|
||||
color: #0969da !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/gruvboxlight.css
Normal file
92
apps/ui/src/styles/themes/gruvboxlight.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Gruvbox Light Theme */
|
||||
|
||||
.gruvboxlight {
|
||||
--background: oklch(0.96 0.02 85);
|
||||
--background-50: oklch(0.96 0.02 85 / 0.5);
|
||||
--background-80: oklch(0.96 0.02 85 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.04 65);
|
||||
--foreground-secondary: oklch(0.4 0.04 65);
|
||||
--foreground-muted: oklch(0.55 0.03 65);
|
||||
|
||||
--card: oklch(0.98 0.015 85);
|
||||
--card-foreground: oklch(0.25 0.04 65);
|
||||
--popover: oklch(0.97 0.018 85);
|
||||
--popover-foreground: oklch(0.25 0.04 65);
|
||||
|
||||
--primary: oklch(0.55 0.15 70);
|
||||
--primary-foreground: oklch(0.98 0.015 85);
|
||||
--brand-400: oklch(0.6 0.13 70);
|
||||
--brand-500: oklch(0.55 0.15 70);
|
||||
--brand-600: oklch(0.5 0.17 70);
|
||||
|
||||
--secondary: oklch(0.93 0.025 85);
|
||||
--secondary-foreground: oklch(0.25 0.04 65);
|
||||
--muted: oklch(0.92 0.028 85);
|
||||
--muted-foreground: oklch(0.5 0.03 65);
|
||||
--accent: oklch(0.9 0.032 85);
|
||||
--accent-foreground: oklch(0.25 0.04 65);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.87 0.03 85);
|
||||
--border-glass: oklch(0.55 0.15 70 / 0.15);
|
||||
--input: oklch(0.97 0.018 85);
|
||||
--ring: oklch(0.55 0.15 70);
|
||||
|
||||
--chart-1: oklch(0.55 0.15 70);
|
||||
--chart-2: oklch(0.55 0.18 25);
|
||||
--chart-3: oklch(0.5 0.15 145);
|
||||
--chart-4: oklch(0.55 0.15 230);
|
||||
--chart-5: oklch(0.55 0.15 300);
|
||||
|
||||
--sidebar: oklch(0.95 0.022 85);
|
||||
--sidebar-foreground: oklch(0.25 0.04 65);
|
||||
--sidebar-primary: oklch(0.55 0.15 70);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.015 85);
|
||||
--sidebar-accent: oklch(0.92 0.028 85);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.04 65);
|
||||
--sidebar-border: oklch(0.87 0.03 85);
|
||||
--sidebar-ring: oklch(0.55 0.15 70);
|
||||
|
||||
--action-view: oklch(0.55 0.15 70);
|
||||
--action-view-hover: oklch(0.5 0.17 70);
|
||||
--action-followup: oklch(0.55 0.15 230);
|
||||
--action-followup-hover: oklch(0.5 0.17 230);
|
||||
--action-commit: oklch(0.5 0.15 145);
|
||||
--action-commit-hover: oklch(0.45 0.17 145);
|
||||
--action-verify: oklch(0.5 0.15 145);
|
||||
--action-verify-hover: oklch(0.45 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.55 0.15 70);
|
||||
--running-indicator-text: oklch(0.5 0.17 70);
|
||||
|
||||
--status-success: oklch(0.5 0.15 145);
|
||||
--status-success-bg: oklch(0.5 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.6 0.15 70);
|
||||
--status-warning-bg: oklch(0.6 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 230);
|
||||
--status-info-bg: oklch(0.55 0.15 230 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.03 65);
|
||||
--status-in-progress: oklch(0.6 0.15 70);
|
||||
--status-waiting: oklch(0.58 0.12 55);
|
||||
}
|
||||
|
||||
.gruvboxlight .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.96 0.02 85),
|
||||
oklch(0.95 0.025 85),
|
||||
oklch(0.96 0.02 85)
|
||||
);
|
||||
}
|
||||
|
||||
.gruvboxlight .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #d79921 0%, #b57614 50%, #d79921 100%);
|
||||
}
|
||||
|
||||
.gruvboxlight .animated-outline-inner {
|
||||
background: oklch(0.98 0.015 85) !important;
|
||||
color: #b57614 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/lavender.css
Normal file
92
apps/ui/src/styles/themes/lavender.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Lavender Theme - Soft purple/lavender */
|
||||
|
||||
.lavender {
|
||||
--background: oklch(0.97 0.02 285);
|
||||
--background-50: oklch(0.97 0.02 285 / 0.5);
|
||||
--background-80: oklch(0.97 0.02 285 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.04 285);
|
||||
--foreground-secondary: oklch(0.45 0.04 285);
|
||||
--foreground-muted: oklch(0.55 0.03 285);
|
||||
|
||||
--card: oklch(0.98 0.015 285);
|
||||
--card-foreground: oklch(0.25 0.04 285);
|
||||
--popover: oklch(0.98 0.015 285);
|
||||
--popover-foreground: oklch(0.25 0.04 285);
|
||||
|
||||
--primary: oklch(0.55 0.18 280);
|
||||
--primary-foreground: oklch(0.98 0.015 285);
|
||||
--brand-400: oklch(0.6 0.16 280);
|
||||
--brand-500: oklch(0.55 0.18 280);
|
||||
--brand-600: oklch(0.5 0.2 280);
|
||||
|
||||
--secondary: oklch(0.94 0.025 285);
|
||||
--secondary-foreground: oklch(0.25 0.04 285);
|
||||
--muted: oklch(0.93 0.028 285);
|
||||
--muted-foreground: oklch(0.5 0.04 285);
|
||||
--accent: oklch(0.91 0.032 285);
|
||||
--accent-foreground: oklch(0.25 0.04 285);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.88 0.025 285);
|
||||
--border-glass: oklch(0.55 0.18 280 / 0.15);
|
||||
--input: oklch(0.97 0.018 285);
|
||||
--ring: oklch(0.55 0.18 280);
|
||||
|
||||
--chart-1: oklch(0.55 0.18 280);
|
||||
--chart-2: oklch(0.6 0.15 320);
|
||||
--chart-3: oklch(0.55 0.15 250);
|
||||
--chart-4: oklch(0.6 0.12 200);
|
||||
--chart-5: oklch(0.55 0.15 350);
|
||||
|
||||
--sidebar: oklch(0.96 0.022 285);
|
||||
--sidebar-foreground: oklch(0.25 0.04 285);
|
||||
--sidebar-primary: oklch(0.55 0.18 280);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.015 285);
|
||||
--sidebar-accent: oklch(0.93 0.028 285);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.04 285);
|
||||
--sidebar-border: oklch(0.88 0.025 285);
|
||||
--sidebar-ring: oklch(0.55 0.18 280);
|
||||
|
||||
--action-view: oklch(0.55 0.18 280);
|
||||
--action-view-hover: oklch(0.5 0.2 280);
|
||||
--action-followup: oklch(0.55 0.15 250);
|
||||
--action-followup-hover: oklch(0.5 0.17 250);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.55 0.18 280);
|
||||
--running-indicator-text: oklch(0.5 0.2 280);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 250);
|
||||
--status-info-bg: oklch(0.55 0.15 250 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.03 285);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.lavender .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.97 0.02 285),
|
||||
oklch(0.96 0.025 285),
|
||||
oklch(0.97 0.02 285)
|
||||
);
|
||||
}
|
||||
|
||||
.lavender .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #8b5cf6 50%, #a855f7 100%);
|
||||
}
|
||||
|
||||
.lavender .animated-outline-inner {
|
||||
background: oklch(0.98 0.015 285) !important;
|
||||
color: #a855f7 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/mint.css
Normal file
92
apps/ui/src/styles/themes/mint.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Mint Theme - Fresh mint green */
|
||||
|
||||
.mint {
|
||||
--background: oklch(0.98 0.015 160);
|
||||
--background-50: oklch(0.98 0.015 160 / 0.5);
|
||||
--background-80: oklch(0.98 0.015 160 / 0.8);
|
||||
|
||||
--foreground: oklch(0.2 0.03 160);
|
||||
--foreground-secondary: oklch(0.4 0.03 160);
|
||||
--foreground-muted: oklch(0.55 0.02 160);
|
||||
|
||||
--card: oklch(0.99 0.01 160);
|
||||
--card-foreground: oklch(0.2 0.03 160);
|
||||
--popover: oklch(0.99 0.01 160);
|
||||
--popover-foreground: oklch(0.2 0.03 160);
|
||||
|
||||
--primary: oklch(0.55 0.15 165);
|
||||
--primary-foreground: oklch(0.99 0.01 160);
|
||||
--brand-400: oklch(0.6 0.13 165);
|
||||
--brand-500: oklch(0.55 0.15 165);
|
||||
--brand-600: oklch(0.5 0.17 165);
|
||||
|
||||
--secondary: oklch(0.95 0.018 160);
|
||||
--secondary-foreground: oklch(0.2 0.03 160);
|
||||
--muted: oklch(0.94 0.02 160);
|
||||
--muted-foreground: oklch(0.5 0.03 160);
|
||||
--accent: oklch(0.92 0.025 160);
|
||||
--accent-foreground: oklch(0.2 0.03 160);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.88 0.02 160);
|
||||
--border-glass: oklch(0.55 0.15 165 / 0.15);
|
||||
--input: oklch(0.98 0.012 160);
|
||||
--ring: oklch(0.55 0.15 165);
|
||||
|
||||
--chart-1: oklch(0.55 0.15 165);
|
||||
--chart-2: oklch(0.6 0.12 200);
|
||||
--chart-3: oklch(0.55 0.15 140);
|
||||
--chart-4: oklch(0.6 0.12 180);
|
||||
--chart-5: oklch(0.55 0.1 230);
|
||||
|
||||
--sidebar: oklch(0.97 0.015 160);
|
||||
--sidebar-foreground: oklch(0.2 0.03 160);
|
||||
--sidebar-primary: oklch(0.55 0.15 165);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.01 160);
|
||||
--sidebar-accent: oklch(0.94 0.02 160);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.03 160);
|
||||
--sidebar-border: oklch(0.88 0.02 160);
|
||||
--sidebar-ring: oklch(0.55 0.15 165);
|
||||
|
||||
--action-view: oklch(0.55 0.15 165);
|
||||
--action-view-hover: oklch(0.5 0.17 165);
|
||||
--action-followup: oklch(0.55 0.12 200);
|
||||
--action-followup-hover: oklch(0.5 0.14 200);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.55 0.15 165);
|
||||
--running-indicator-text: oklch(0.5 0.17 165);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.12 200);
|
||||
--status-info-bg: oklch(0.55 0.12 200 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.02 160);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.mint .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.98 0.015 160),
|
||||
oklch(0.97 0.018 160),
|
||||
oklch(0.98 0.015 160)
|
||||
);
|
||||
}
|
||||
|
||||
.mint .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #10b981 0%, #14b8a6 50%, #10b981 100%);
|
||||
}
|
||||
|
||||
.mint .animated-outline-inner {
|
||||
background: oklch(0.99 0.01 160) !important;
|
||||
color: #10b981 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/nordlight.css
Normal file
92
apps/ui/src/styles/themes/nordlight.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Nord Light Theme */
|
||||
|
||||
.nordlight {
|
||||
--background: oklch(0.97 0.01 220);
|
||||
--background-50: oklch(0.97 0.01 220 / 0.5);
|
||||
--background-80: oklch(0.97 0.01 220 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.03 220);
|
||||
--foreground-secondary: oklch(0.45 0.025 220);
|
||||
--foreground-muted: oklch(0.55 0.02 220);
|
||||
|
||||
--card: oklch(0.99 0.008 220);
|
||||
--card-foreground: oklch(0.25 0.03 220);
|
||||
--popover: oklch(0.98 0.01 220);
|
||||
--popover-foreground: oklch(0.25 0.03 220);
|
||||
|
||||
--primary: oklch(0.55 0.12 225);
|
||||
--primary-foreground: oklch(0.99 0.008 220);
|
||||
--brand-400: oklch(0.6 0.1 225);
|
||||
--brand-500: oklch(0.55 0.12 225);
|
||||
--brand-600: oklch(0.5 0.14 225);
|
||||
|
||||
--secondary: oklch(0.94 0.012 220);
|
||||
--secondary-foreground: oklch(0.25 0.03 220);
|
||||
--muted: oklch(0.93 0.015 220);
|
||||
--muted-foreground: oklch(0.5 0.025 220);
|
||||
--accent: oklch(0.91 0.018 220);
|
||||
--accent-foreground: oklch(0.25 0.03 220);
|
||||
|
||||
--destructive: oklch(0.55 0.18 25);
|
||||
--border: oklch(0.88 0.015 220);
|
||||
--border-glass: oklch(0.55 0.12 225 / 0.12);
|
||||
--input: oklch(0.98 0.01 220);
|
||||
--ring: oklch(0.55 0.12 225);
|
||||
|
||||
--chart-1: oklch(0.55 0.12 225);
|
||||
--chart-2: oklch(0.55 0.15 25);
|
||||
--chart-3: oklch(0.55 0.12 145);
|
||||
--chart-4: oklch(0.55 0.12 300);
|
||||
--chart-5: oklch(0.6 0.12 80);
|
||||
|
||||
--sidebar: oklch(0.96 0.01 220);
|
||||
--sidebar-foreground: oklch(0.25 0.03 220);
|
||||
--sidebar-primary: oklch(0.55 0.12 225);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.008 220);
|
||||
--sidebar-accent: oklch(0.93 0.015 220);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.03 220);
|
||||
--sidebar-border: oklch(0.88 0.015 220);
|
||||
--sidebar-ring: oklch(0.55 0.12 225);
|
||||
|
||||
--action-view: oklch(0.55 0.12 225);
|
||||
--action-view-hover: oklch(0.5 0.14 225);
|
||||
--action-followup: oklch(0.55 0.12 200);
|
||||
--action-followup-hover: oklch(0.5 0.14 200);
|
||||
--action-commit: oklch(0.55 0.12 145);
|
||||
--action-commit-hover: oklch(0.5 0.14 145);
|
||||
--action-verify: oklch(0.55 0.12 145);
|
||||
--action-verify-hover: oklch(0.5 0.14 145);
|
||||
|
||||
--running-indicator: oklch(0.55 0.12 225);
|
||||
--running-indicator-text: oklch(0.5 0.14 225);
|
||||
|
||||
--status-success: oklch(0.55 0.12 145);
|
||||
--status-success-bg: oklch(0.55 0.12 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.12 80);
|
||||
--status-warning-bg: oklch(0.65 0.12 80 / 0.15);
|
||||
--status-error: oklch(0.55 0.18 25);
|
||||
--status-error-bg: oklch(0.55 0.18 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.12 225);
|
||||
--status-info-bg: oklch(0.55 0.12 225 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.02 220);
|
||||
--status-in-progress: oklch(0.65 0.12 80);
|
||||
--status-waiting: oklch(0.6 0.1 55);
|
||||
}
|
||||
|
||||
.nordlight .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.97 0.01 220),
|
||||
oklch(0.96 0.012 220),
|
||||
oklch(0.97 0.01 220)
|
||||
);
|
||||
}
|
||||
|
||||
.nordlight .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #5e81ac 0%, #81a1c1 50%, #5e81ac 100%);
|
||||
}
|
||||
|
||||
.nordlight .animated-outline-inner {
|
||||
background: oklch(0.99 0.008 220) !important;
|
||||
color: #5e81ac !important;
|
||||
}
|
||||
98
apps/ui/src/styles/themes/ocean.css
Normal file
98
apps/ui/src/styles/themes/ocean.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/* Ocean Theme - Deep blue dark theme */
|
||||
|
||||
.ocean {
|
||||
--background: oklch(0.12 0.03 230);
|
||||
--background-50: oklch(0.12 0.03 230 / 0.5);
|
||||
--background-80: oklch(0.12 0.03 230 / 0.8);
|
||||
|
||||
--foreground: oklch(0.95 0.02 230);
|
||||
--foreground-secondary: oklch(0.7 0.03 230);
|
||||
--foreground-muted: oklch(0.6 0.03 230);
|
||||
|
||||
--card: oklch(0.16 0.035 230);
|
||||
--card-foreground: oklch(0.95 0.02 230);
|
||||
--popover: oklch(0.14 0.032 230);
|
||||
--popover-foreground: oklch(0.95 0.02 230);
|
||||
|
||||
--primary: oklch(0.6 0.18 230);
|
||||
--primary-foreground: oklch(0.12 0.03 230);
|
||||
--brand-400: oklch(0.65 0.16 230);
|
||||
--brand-500: oklch(0.6 0.18 230);
|
||||
--brand-600: oklch(0.55 0.2 235);
|
||||
|
||||
--secondary: oklch(1 0 0 / 0.05);
|
||||
--secondary-foreground: oklch(0.95 0.02 230);
|
||||
--muted: oklch(0.2 0.04 230);
|
||||
--muted-foreground: oklch(0.65 0.03 230);
|
||||
--accent: oklch(1 0 0 / 0.08);
|
||||
--accent-foreground: oklch(0.95 0.02 230);
|
||||
|
||||
--destructive: oklch(0.6 0.22 25);
|
||||
--border: oklch(0.25 0.05 230);
|
||||
--border-glass: oklch(1 0 0 / 0.1);
|
||||
--input: oklch(0.14 0.032 230);
|
||||
--ring: oklch(0.6 0.18 230);
|
||||
|
||||
--chart-1: oklch(0.6 0.18 230);
|
||||
--chart-2: oklch(0.6 0.15 200);
|
||||
--chart-3: oklch(0.65 0.15 180);
|
||||
--chart-4: oklch(0.6 0.2 260);
|
||||
--chart-5: oklch(0.55 0.15 300);
|
||||
|
||||
--sidebar: oklch(0.1 0.03 230 / 0.8);
|
||||
--sidebar-foreground: oklch(0.95 0.02 230);
|
||||
--sidebar-primary: oklch(0.6 0.18 230);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.03 230);
|
||||
--sidebar-accent: oklch(1 0 0 / 0.05);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.02 230);
|
||||
--sidebar-border: oklch(1 0 0 / 0.1);
|
||||
--sidebar-ring: oklch(0.6 0.18 230);
|
||||
|
||||
--action-view: oklch(0.6 0.18 230);
|
||||
--action-view-hover: oklch(0.55 0.2 235);
|
||||
--action-followup: oklch(0.6 0.15 200);
|
||||
--action-followup-hover: oklch(0.55 0.17 200);
|
||||
--action-commit: oklch(0.6 0.15 180);
|
||||
--action-commit-hover: oklch(0.55 0.17 180);
|
||||
--action-verify: oklch(0.6 0.15 180);
|
||||
--action-verify-hover: oklch(0.55 0.17 180);
|
||||
|
||||
--running-indicator: oklch(0.6 0.18 230);
|
||||
--running-indicator-text: oklch(0.65 0.16 230);
|
||||
|
||||
--status-success: oklch(0.6 0.15 180);
|
||||
--status-success-bg: oklch(0.6 0.15 180 / 0.2);
|
||||
--status-warning: oklch(0.7 0.15 80);
|
||||
--status-warning-bg: oklch(0.7 0.15 80 / 0.2);
|
||||
--status-error: oklch(0.6 0.22 25);
|
||||
--status-error-bg: oklch(0.6 0.22 25 / 0.2);
|
||||
--status-info: oklch(0.6 0.18 230);
|
||||
--status-info-bg: oklch(0.6 0.18 230 / 0.2);
|
||||
--status-backlog: oklch(0.55 0.03 230);
|
||||
--status-in-progress: oklch(0.7 0.15 80);
|
||||
--status-waiting: oklch(0.65 0.12 60);
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(0, 10, 30, 0.3);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 10, 30, 0.4), 0 1px 2px rgba(0, 10, 30, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 10, 30, 0.4), 0 2px 4px -1px rgba(0, 10, 30, 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 10, 30, 0.4), 0 4px 6px -2px rgba(0, 10, 30, 0.2);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 10, 30, 0.5), 0 10px 10px -5px rgba(0, 10, 30, 0.3);
|
||||
}
|
||||
|
||||
.ocean .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.12 0.03 230),
|
||||
oklch(0.15 0.035 230),
|
||||
oklch(0.12 0.03 230)
|
||||
);
|
||||
}
|
||||
|
||||
.ocean .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #3b82f6 0%, #0ea5e9 50%, #3b82f6 100%);
|
||||
}
|
||||
|
||||
.ocean .animated-outline-inner {
|
||||
background: oklch(0.16 0.035 230) !important;
|
||||
color: #93c5fd !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/paper.css
Normal file
92
apps/ui/src/styles/themes/paper.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Paper Theme - Clean minimal white */
|
||||
|
||||
.paper {
|
||||
--background: oklch(0.99 0 0);
|
||||
--background-50: oklch(0.99 0 0 / 0.5);
|
||||
--background-80: oklch(0.99 0 0 / 0.8);
|
||||
|
||||
--foreground: oklch(0.15 0 0);
|
||||
--foreground-secondary: oklch(0.35 0 0);
|
||||
--foreground-muted: oklch(0.5 0 0);
|
||||
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.15 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.15 0 0);
|
||||
|
||||
--primary: oklch(0.3 0 0);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--brand-400: oklch(0.35 0 0);
|
||||
--brand-500: oklch(0.3 0 0);
|
||||
--brand-600: oklch(0.25 0 0);
|
||||
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.15 0 0);
|
||||
--muted: oklch(0.96 0 0);
|
||||
--muted-foreground: oklch(0.45 0 0);
|
||||
--accent: oklch(0.95 0 0);
|
||||
--accent-foreground: oklch(0.15 0 0);
|
||||
|
||||
--destructive: oklch(0.5 0.2 25);
|
||||
--border: oklch(0.9 0 0);
|
||||
--border-glass: oklch(0.15 0 0 / 0.08);
|
||||
--input: oklch(0.98 0 0);
|
||||
--ring: oklch(0.3 0 0);
|
||||
|
||||
--chart-1: oklch(0.3 0 0);
|
||||
--chart-2: oklch(0.5 0 0);
|
||||
--chart-3: oklch(0.4 0 0);
|
||||
--chart-4: oklch(0.6 0 0);
|
||||
--chart-5: oklch(0.35 0 0);
|
||||
|
||||
--sidebar: oklch(0.98 0 0);
|
||||
--sidebar-foreground: oklch(0.15 0 0);
|
||||
--sidebar-primary: oklch(0.3 0 0);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.95 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.15 0 0);
|
||||
--sidebar-border: oklch(0.9 0 0);
|
||||
--sidebar-ring: oklch(0.3 0 0);
|
||||
|
||||
--action-view: oklch(0.3 0 0);
|
||||
--action-view-hover: oklch(0.25 0 0);
|
||||
--action-followup: oklch(0.4 0 0);
|
||||
--action-followup-hover: oklch(0.35 0 0);
|
||||
--action-commit: oklch(0.35 0.1 145);
|
||||
--action-commit-hover: oklch(0.3 0.12 145);
|
||||
--action-verify: oklch(0.35 0.1 145);
|
||||
--action-verify-hover: oklch(0.3 0.12 145);
|
||||
|
||||
--running-indicator: oklch(0.3 0 0);
|
||||
--running-indicator-text: oklch(0.25 0 0);
|
||||
|
||||
--status-success: oklch(0.4 0.15 145);
|
||||
--status-success-bg: oklch(0.4 0.15 145 / 0.12);
|
||||
--status-warning: oklch(0.55 0.15 70);
|
||||
--status-warning-bg: oklch(0.55 0.15 70 / 0.12);
|
||||
--status-error: oklch(0.5 0.2 25);
|
||||
--status-error-bg: oklch(0.5 0.2 25 / 0.12);
|
||||
--status-info: oklch(0.45 0.12 230);
|
||||
--status-info-bg: oklch(0.45 0.12 230 / 0.12);
|
||||
--status-backlog: oklch(0.55 0 0);
|
||||
--status-in-progress: oklch(0.55 0.15 70);
|
||||
--status-waiting: oklch(0.5 0.1 50);
|
||||
}
|
||||
|
||||
.paper .content-bg {
|
||||
background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
|
||||
}
|
||||
|
||||
.paper .animated-outline-gradient {
|
||||
background: conic-gradient(
|
||||
from 90deg at 50% 50%,
|
||||
oklch(0.3 0 0) 0%,
|
||||
oklch(0.5 0 0) 50%,
|
||||
oklch(0.3 0 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.paper .animated-outline-inner {
|
||||
background: oklch(1 0 0) !important;
|
||||
color: oklch(0.2 0 0) !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/peach.css
Normal file
92
apps/ui/src/styles/themes/peach.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Peach Theme - Soft peach/coral tones */
|
||||
|
||||
.peach {
|
||||
--background: oklch(0.98 0.02 50);
|
||||
--background-50: oklch(0.98 0.02 50 / 0.5);
|
||||
--background-80: oklch(0.98 0.02 50 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.04 40);
|
||||
--foreground-secondary: oklch(0.45 0.03 40);
|
||||
--foreground-muted: oklch(0.55 0.03 40);
|
||||
|
||||
--card: oklch(0.99 0.015 50);
|
||||
--card-foreground: oklch(0.25 0.04 40);
|
||||
--popover: oklch(0.99 0.015 50);
|
||||
--popover-foreground: oklch(0.25 0.04 40);
|
||||
|
||||
--primary: oklch(0.65 0.15 40);
|
||||
--primary-foreground: oklch(0.99 0.015 50);
|
||||
--brand-400: oklch(0.7 0.13 40);
|
||||
--brand-500: oklch(0.65 0.15 40);
|
||||
--brand-600: oklch(0.6 0.17 40);
|
||||
|
||||
--secondary: oklch(0.95 0.025 50);
|
||||
--secondary-foreground: oklch(0.25 0.04 40);
|
||||
--muted: oklch(0.94 0.028 50);
|
||||
--muted-foreground: oklch(0.5 0.03 40);
|
||||
--accent: oklch(0.92 0.032 50);
|
||||
--accent-foreground: oklch(0.25 0.04 40);
|
||||
|
||||
--destructive: oklch(0.55 0.2 20);
|
||||
--border: oklch(0.9 0.025 50);
|
||||
--border-glass: oklch(0.65 0.15 40 / 0.15);
|
||||
--input: oklch(0.98 0.018 50);
|
||||
--ring: oklch(0.65 0.15 40);
|
||||
|
||||
--chart-1: oklch(0.65 0.15 40);
|
||||
--chart-2: oklch(0.6 0.15 25);
|
||||
--chart-3: oklch(0.6 0.12 70);
|
||||
--chart-4: oklch(0.55 0.12 350);
|
||||
--chart-5: oklch(0.55 0.1 100);
|
||||
|
||||
--sidebar: oklch(0.97 0.022 50);
|
||||
--sidebar-foreground: oklch(0.25 0.04 40);
|
||||
--sidebar-primary: oklch(0.65 0.15 40);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.015 50);
|
||||
--sidebar-accent: oklch(0.94 0.028 50);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.04 40);
|
||||
--sidebar-border: oklch(0.9 0.025 50);
|
||||
--sidebar-ring: oklch(0.65 0.15 40);
|
||||
|
||||
--action-view: oklch(0.65 0.15 40);
|
||||
--action-view-hover: oklch(0.6 0.17 40);
|
||||
--action-followup: oklch(0.6 0.15 25);
|
||||
--action-followup-hover: oklch(0.55 0.17 25);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.65 0.15 40);
|
||||
--running-indicator-text: oklch(0.6 0.17 40);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 20);
|
||||
--status-error-bg: oklch(0.55 0.2 20 / 0.15);
|
||||
--status-info: oklch(0.55 0.12 230);
|
||||
--status-info-bg: oklch(0.55 0.12 230 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.03 40);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.peach .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.98 0.02 50),
|
||||
oklch(0.97 0.025 50),
|
||||
oklch(0.98 0.02 50)
|
||||
);
|
||||
}
|
||||
|
||||
.peach .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #fb923c 0%, #f97316 50%, #fb923c 100%);
|
||||
}
|
||||
|
||||
.peach .animated-outline-inner {
|
||||
background: oklch(0.99 0.015 50) !important;
|
||||
color: #f97316 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/rose.css
Normal file
92
apps/ui/src/styles/themes/rose.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Rose Theme - Soft pink/rose tones */
|
||||
|
||||
.rose {
|
||||
--background: oklch(0.98 0.01 350);
|
||||
--background-50: oklch(0.98 0.01 350 / 0.5);
|
||||
--background-80: oklch(0.98 0.01 350 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.03 350);
|
||||
--foreground-secondary: oklch(0.45 0.03 350);
|
||||
--foreground-muted: oklch(0.55 0.02 350);
|
||||
|
||||
--card: oklch(0.99 0.008 350);
|
||||
--card-foreground: oklch(0.25 0.03 350);
|
||||
--popover: oklch(0.99 0.008 350);
|
||||
--popover-foreground: oklch(0.25 0.03 350);
|
||||
|
||||
--primary: oklch(0.6 0.18 350);
|
||||
--primary-foreground: oklch(0.99 0.008 350);
|
||||
--brand-400: oklch(0.65 0.16 350);
|
||||
--brand-500: oklch(0.6 0.18 350);
|
||||
--brand-600: oklch(0.55 0.2 350);
|
||||
|
||||
--secondary: oklch(0.95 0.015 350);
|
||||
--secondary-foreground: oklch(0.25 0.03 350);
|
||||
--muted: oklch(0.94 0.02 350);
|
||||
--muted-foreground: oklch(0.5 0.03 350);
|
||||
--accent: oklch(0.92 0.025 350);
|
||||
--accent-foreground: oklch(0.25 0.03 350);
|
||||
|
||||
--destructive: oklch(0.55 0.2 15);
|
||||
--border: oklch(0.9 0.02 350);
|
||||
--border-glass: oklch(0.6 0.18 350 / 0.15);
|
||||
--input: oklch(0.98 0.01 350);
|
||||
--ring: oklch(0.6 0.18 350);
|
||||
|
||||
--chart-1: oklch(0.6 0.18 350);
|
||||
--chart-2: oklch(0.65 0.15 320);
|
||||
--chart-3: oklch(0.55 0.15 15);
|
||||
--chart-4: oklch(0.6 0.15 280);
|
||||
--chart-5: oklch(0.55 0.12 200);
|
||||
|
||||
--sidebar: oklch(0.97 0.012 350);
|
||||
--sidebar-foreground: oklch(0.25 0.03 350);
|
||||
--sidebar-primary: oklch(0.6 0.18 350);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.008 350);
|
||||
--sidebar-accent: oklch(0.94 0.02 350);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.03 350);
|
||||
--sidebar-border: oklch(0.9 0.02 350);
|
||||
--sidebar-ring: oklch(0.6 0.18 350);
|
||||
|
||||
--action-view: oklch(0.6 0.18 350);
|
||||
--action-view-hover: oklch(0.55 0.2 350);
|
||||
--action-followup: oklch(0.6 0.15 320);
|
||||
--action-followup-hover: oklch(0.55 0.17 320);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.6 0.18 350);
|
||||
--running-indicator-text: oklch(0.55 0.2 350);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 15);
|
||||
--status-error-bg: oklch(0.55 0.2 15 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 230);
|
||||
--status-info-bg: oklch(0.55 0.15 230 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.02 350);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.rose .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.98 0.01 350),
|
||||
oklch(0.97 0.015 350),
|
||||
oklch(0.98 0.01 350)
|
||||
);
|
||||
}
|
||||
|
||||
.rose .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #f43f5e 0%, #ec4899 50%, #f43f5e 100%);
|
||||
}
|
||||
|
||||
.rose .animated-outline-inner {
|
||||
background: oklch(0.99 0.008 350) !important;
|
||||
color: #f43f5e !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/sand.css
Normal file
92
apps/ui/src/styles/themes/sand.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Sand Theme - Sandy beige tones */
|
||||
|
||||
.sand {
|
||||
--background: oklch(0.96 0.02 80);
|
||||
--background-50: oklch(0.96 0.02 80 / 0.5);
|
||||
--background-80: oklch(0.96 0.02 80 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.03 70);
|
||||
--foreground-secondary: oklch(0.45 0.03 70);
|
||||
--foreground-muted: oklch(0.55 0.02 70);
|
||||
|
||||
--card: oklch(0.98 0.015 80);
|
||||
--card-foreground: oklch(0.25 0.03 70);
|
||||
--popover: oklch(0.97 0.015 80);
|
||||
--popover-foreground: oklch(0.25 0.03 70);
|
||||
|
||||
--primary: oklch(0.55 0.12 60);
|
||||
--primary-foreground: oklch(0.98 0.015 80);
|
||||
--brand-400: oklch(0.6 0.1 60);
|
||||
--brand-500: oklch(0.55 0.12 60);
|
||||
--brand-600: oklch(0.5 0.14 60);
|
||||
|
||||
--secondary: oklch(0.93 0.025 80);
|
||||
--secondary-foreground: oklch(0.25 0.03 70);
|
||||
--muted: oklch(0.92 0.028 80);
|
||||
--muted-foreground: oklch(0.5 0.03 70);
|
||||
--accent: oklch(0.9 0.03 80);
|
||||
--accent-foreground: oklch(0.25 0.03 70);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.87 0.03 80);
|
||||
--border-glass: oklch(0.55 0.12 60 / 0.15);
|
||||
--input: oklch(0.97 0.018 80);
|
||||
--ring: oklch(0.55 0.12 60);
|
||||
|
||||
--chart-1: oklch(0.55 0.12 60);
|
||||
--chart-2: oklch(0.6 0.1 40);
|
||||
--chart-3: oklch(0.55 0.1 100);
|
||||
--chart-4: oklch(0.5 0.08 30);
|
||||
--chart-5: oklch(0.55 0.08 120);
|
||||
|
||||
--sidebar: oklch(0.95 0.022 80);
|
||||
--sidebar-foreground: oklch(0.25 0.03 70);
|
||||
--sidebar-primary: oklch(0.55 0.12 60);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.015 80);
|
||||
--sidebar-accent: oklch(0.92 0.028 80);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.03 70);
|
||||
--sidebar-border: oklch(0.87 0.03 80);
|
||||
--sidebar-ring: oklch(0.55 0.12 60);
|
||||
|
||||
--action-view: oklch(0.55 0.12 60);
|
||||
--action-view-hover: oklch(0.5 0.14 60);
|
||||
--action-followup: oklch(0.55 0.1 40);
|
||||
--action-followup-hover: oklch(0.5 0.12 40);
|
||||
--action-commit: oklch(0.55 0.12 130);
|
||||
--action-commit-hover: oklch(0.5 0.14 130);
|
||||
--action-verify: oklch(0.55 0.12 130);
|
||||
--action-verify-hover: oklch(0.5 0.14 130);
|
||||
|
||||
--running-indicator: oklch(0.55 0.12 60);
|
||||
--running-indicator-text: oklch(0.5 0.14 60);
|
||||
|
||||
--status-success: oklch(0.55 0.12 130);
|
||||
--status-success-bg: oklch(0.55 0.12 130 / 0.15);
|
||||
--status-warning: oklch(0.6 0.12 70);
|
||||
--status-warning-bg: oklch(0.6 0.12 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.18 25);
|
||||
--status-error-bg: oklch(0.55 0.18 25 / 0.15);
|
||||
--status-info: oklch(0.5 0.12 230);
|
||||
--status-info-bg: oklch(0.5 0.12 230 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.03 70);
|
||||
--status-in-progress: oklch(0.6 0.12 70);
|
||||
--status-waiting: oklch(0.58 0.1 55);
|
||||
}
|
||||
|
||||
.sand .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.96 0.02 80),
|
||||
oklch(0.95 0.025 80),
|
||||
oklch(0.96 0.02 80)
|
||||
);
|
||||
}
|
||||
|
||||
.sand .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #d97706 0%, #b45309 50%, #d97706 100%);
|
||||
}
|
||||
|
||||
.sand .animated-outline-inner {
|
||||
background: oklch(0.98 0.015 80) !important;
|
||||
color: #d97706 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/sepia.css
Normal file
92
apps/ui/src/styles/themes/sepia.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Sepia Theme - Warm sepia/parchment tones */
|
||||
|
||||
.sepia {
|
||||
--background: oklch(0.95 0.025 70);
|
||||
--background-50: oklch(0.95 0.025 70 / 0.5);
|
||||
--background-80: oklch(0.95 0.025 70 / 0.8);
|
||||
|
||||
--foreground: oklch(0.25 0.04 50);
|
||||
--foreground-secondary: oklch(0.45 0.03 50);
|
||||
--foreground-muted: oklch(0.55 0.03 50);
|
||||
|
||||
--card: oklch(0.97 0.02 70);
|
||||
--card-foreground: oklch(0.25 0.04 50);
|
||||
--popover: oklch(0.96 0.022 70);
|
||||
--popover-foreground: oklch(0.25 0.04 50);
|
||||
|
||||
--primary: oklch(0.5 0.12 50);
|
||||
--primary-foreground: oklch(0.97 0.02 70);
|
||||
--brand-400: oklch(0.55 0.1 50);
|
||||
--brand-500: oklch(0.5 0.12 50);
|
||||
--brand-600: oklch(0.45 0.14 50);
|
||||
|
||||
--secondary: oklch(0.92 0.028 70);
|
||||
--secondary-foreground: oklch(0.25 0.04 50);
|
||||
--muted: oklch(0.91 0.03 70);
|
||||
--muted-foreground: oklch(0.5 0.03 50);
|
||||
--accent: oklch(0.89 0.035 70);
|
||||
--accent-foreground: oklch(0.25 0.04 50);
|
||||
|
||||
--destructive: oklch(0.55 0.18 25);
|
||||
--border: oklch(0.86 0.035 70);
|
||||
--border-glass: oklch(0.5 0.12 50 / 0.15);
|
||||
--input: oklch(0.96 0.022 70);
|
||||
--ring: oklch(0.5 0.12 50);
|
||||
|
||||
--chart-1: oklch(0.5 0.12 50);
|
||||
--chart-2: oklch(0.55 0.1 35);
|
||||
--chart-3: oklch(0.5 0.08 80);
|
||||
--chart-4: oklch(0.45 0.1 30);
|
||||
--chart-5: oklch(0.5 0.06 100);
|
||||
|
||||
--sidebar: oklch(0.94 0.026 70);
|
||||
--sidebar-foreground: oklch(0.25 0.04 50);
|
||||
--sidebar-primary: oklch(0.5 0.12 50);
|
||||
--sidebar-primary-foreground: oklch(0.97 0.02 70);
|
||||
--sidebar-accent: oklch(0.91 0.03 70);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.04 50);
|
||||
--sidebar-border: oklch(0.86 0.035 70);
|
||||
--sidebar-ring: oklch(0.5 0.12 50);
|
||||
|
||||
--action-view: oklch(0.5 0.12 50);
|
||||
--action-view-hover: oklch(0.45 0.14 50);
|
||||
--action-followup: oklch(0.5 0.1 35);
|
||||
--action-followup-hover: oklch(0.45 0.12 35);
|
||||
--action-commit: oklch(0.5 0.12 130);
|
||||
--action-commit-hover: oklch(0.45 0.14 130);
|
||||
--action-verify: oklch(0.5 0.12 130);
|
||||
--action-verify-hover: oklch(0.45 0.14 130);
|
||||
|
||||
--running-indicator: oklch(0.5 0.12 50);
|
||||
--running-indicator-text: oklch(0.45 0.14 50);
|
||||
|
||||
--status-success: oklch(0.5 0.12 130);
|
||||
--status-success-bg: oklch(0.5 0.12 130 / 0.15);
|
||||
--status-warning: oklch(0.58 0.12 70);
|
||||
--status-warning-bg: oklch(0.58 0.12 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.18 25);
|
||||
--status-error-bg: oklch(0.55 0.18 25 / 0.15);
|
||||
--status-info: oklch(0.5 0.1 230);
|
||||
--status-info-bg: oklch(0.5 0.1 230 / 0.15);
|
||||
--status-backlog: oklch(0.58 0.03 50);
|
||||
--status-in-progress: oklch(0.58 0.12 70);
|
||||
--status-waiting: oklch(0.55 0.1 55);
|
||||
}
|
||||
|
||||
.sepia .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.95 0.025 70),
|
||||
oklch(0.94 0.028 70),
|
||||
oklch(0.95 0.025 70)
|
||||
);
|
||||
}
|
||||
|
||||
.sepia .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #92400e 0%, #a16207 50%, #92400e 100%);
|
||||
}
|
||||
|
||||
.sepia .animated-outline-inner {
|
||||
background: oklch(0.97 0.02 70) !important;
|
||||
color: #92400e !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/sky.css
Normal file
92
apps/ui/src/styles/themes/sky.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Sky Theme - Light sky blue */
|
||||
|
||||
.sky {
|
||||
--background: oklch(0.98 0.015 220);
|
||||
--background-50: oklch(0.98 0.015 220 / 0.5);
|
||||
--background-80: oklch(0.98 0.015 220 / 0.8);
|
||||
|
||||
--foreground: oklch(0.2 0.03 220);
|
||||
--foreground-secondary: oklch(0.4 0.03 220);
|
||||
--foreground-muted: oklch(0.55 0.02 220);
|
||||
|
||||
--card: oklch(0.99 0.01 220);
|
||||
--card-foreground: oklch(0.2 0.03 220);
|
||||
--popover: oklch(0.99 0.01 220);
|
||||
--popover-foreground: oklch(0.2 0.03 220);
|
||||
|
||||
--primary: oklch(0.55 0.15 225);
|
||||
--primary-foreground: oklch(0.99 0.01 220);
|
||||
--brand-400: oklch(0.6 0.13 225);
|
||||
--brand-500: oklch(0.55 0.15 225);
|
||||
--brand-600: oklch(0.5 0.17 225);
|
||||
|
||||
--secondary: oklch(0.95 0.018 220);
|
||||
--secondary-foreground: oklch(0.2 0.03 220);
|
||||
--muted: oklch(0.94 0.02 220);
|
||||
--muted-foreground: oklch(0.5 0.03 220);
|
||||
--accent: oklch(0.92 0.025 220);
|
||||
--accent-foreground: oklch(0.2 0.03 220);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.88 0.02 220);
|
||||
--border-glass: oklch(0.55 0.15 225 / 0.15);
|
||||
--input: oklch(0.98 0.012 220);
|
||||
--ring: oklch(0.55 0.15 225);
|
||||
|
||||
--chart-1: oklch(0.55 0.15 225);
|
||||
--chart-2: oklch(0.6 0.12 200);
|
||||
--chart-3: oklch(0.55 0.15 250);
|
||||
--chart-4: oklch(0.6 0.12 180);
|
||||
--chart-5: oklch(0.55 0.1 270);
|
||||
|
||||
--sidebar: oklch(0.97 0.015 220);
|
||||
--sidebar-foreground: oklch(0.2 0.03 220);
|
||||
--sidebar-primary: oklch(0.55 0.15 225);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.01 220);
|
||||
--sidebar-accent: oklch(0.94 0.02 220);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.03 220);
|
||||
--sidebar-border: oklch(0.88 0.02 220);
|
||||
--sidebar-ring: oklch(0.55 0.15 225);
|
||||
|
||||
--action-view: oklch(0.55 0.15 225);
|
||||
--action-view-hover: oklch(0.5 0.17 225);
|
||||
--action-followup: oklch(0.55 0.12 200);
|
||||
--action-followup-hover: oklch(0.5 0.14 200);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.55 0.15 225);
|
||||
--running-indicator-text: oklch(0.5 0.17 225);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 225);
|
||||
--status-info-bg: oklch(0.55 0.15 225 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.02 220);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.sky .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.98 0.015 220),
|
||||
oklch(0.97 0.018 220),
|
||||
oklch(0.98 0.015 220)
|
||||
);
|
||||
}
|
||||
|
||||
.sky .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #0ea5e9 0%, #38bdf8 50%, #0ea5e9 100%);
|
||||
}
|
||||
|
||||
.sky .animated-outline-inner {
|
||||
background: oklch(0.99 0.01 220) !important;
|
||||
color: #0ea5e9 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/snow.css
Normal file
92
apps/ui/src/styles/themes/snow.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Snow Theme - Clean white with cool blue tints */
|
||||
|
||||
.snow {
|
||||
--background: oklch(0.99 0.005 240);
|
||||
--background-50: oklch(0.99 0.005 240 / 0.5);
|
||||
--background-80: oklch(0.99 0.005 240 / 0.8);
|
||||
|
||||
--foreground: oklch(0.2 0.02 240);
|
||||
--foreground-secondary: oklch(0.4 0.02 240);
|
||||
--foreground-muted: oklch(0.55 0.015 240);
|
||||
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0.02 240);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0.02 240);
|
||||
|
||||
--primary: oklch(0.5 0.15 240);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--brand-400: oklch(0.55 0.13 240);
|
||||
--brand-500: oklch(0.5 0.15 240);
|
||||
--brand-600: oklch(0.45 0.17 240);
|
||||
|
||||
--secondary: oklch(0.97 0.008 240);
|
||||
--secondary-foreground: oklch(0.2 0.02 240);
|
||||
--muted: oklch(0.96 0.01 240);
|
||||
--muted-foreground: oklch(0.5 0.015 240);
|
||||
--accent: oklch(0.95 0.012 240);
|
||||
--accent-foreground: oklch(0.2 0.02 240);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.92 0.008 240);
|
||||
--border-glass: oklch(0.5 0.15 240 / 0.1);
|
||||
--input: oklch(0.98 0.005 240);
|
||||
--ring: oklch(0.5 0.15 240);
|
||||
|
||||
--chart-1: oklch(0.5 0.15 240);
|
||||
--chart-2: oklch(0.55 0.12 200);
|
||||
--chart-3: oklch(0.5 0.15 280);
|
||||
--chart-4: oklch(0.55 0.12 180);
|
||||
--chart-5: oklch(0.5 0.1 260);
|
||||
|
||||
--sidebar: oklch(0.98 0.006 240);
|
||||
--sidebar-foreground: oklch(0.2 0.02 240);
|
||||
--sidebar-primary: oklch(0.5 0.15 240);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.96 0.01 240);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.02 240);
|
||||
--sidebar-border: oklch(0.92 0.008 240);
|
||||
--sidebar-ring: oklch(0.5 0.15 240);
|
||||
|
||||
--action-view: oklch(0.5 0.15 240);
|
||||
--action-view-hover: oklch(0.45 0.17 240);
|
||||
--action-followup: oklch(0.5 0.12 200);
|
||||
--action-followup-hover: oklch(0.45 0.14 200);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.5 0.15 240);
|
||||
--running-indicator-text: oklch(0.45 0.17 240);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.12);
|
||||
--status-warning: oklch(0.65 0.15 70);
|
||||
--status-warning-bg: oklch(0.65 0.15 70 / 0.12);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.12);
|
||||
--status-info: oklch(0.5 0.15 240);
|
||||
--status-info-bg: oklch(0.5 0.15 240 / 0.12);
|
||||
--status-backlog: oklch(0.6 0.015 240);
|
||||
--status-in-progress: oklch(0.65 0.15 70);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.snow .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.99 0.005 240),
|
||||
oklch(0.98 0.008 240),
|
||||
oklch(0.99 0.005 240)
|
||||
);
|
||||
}
|
||||
|
||||
.snow .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
|
||||
}
|
||||
|
||||
.snow .animated-outline-inner {
|
||||
background: oklch(1 0 0) !important;
|
||||
color: #6366f1 !important;
|
||||
}
|
||||
92
apps/ui/src/styles/themes/solarizedlight.css
Normal file
92
apps/ui/src/styles/themes/solarizedlight.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* Solarized Light Theme */
|
||||
|
||||
.solarizedlight {
|
||||
--background: oklch(0.98 0.01 90);
|
||||
--background-50: oklch(0.98 0.01 90 / 0.5);
|
||||
--background-80: oklch(0.98 0.01 90 / 0.8);
|
||||
|
||||
--foreground: oklch(0.35 0.05 200);
|
||||
--foreground-secondary: oklch(0.5 0.05 200);
|
||||
--foreground-muted: oklch(0.6 0.04 200);
|
||||
|
||||
--card: oklch(0.95 0.01 90);
|
||||
--card-foreground: oklch(0.35 0.05 200);
|
||||
--popover: oklch(0.96 0.01 90);
|
||||
--popover-foreground: oklch(0.35 0.05 200);
|
||||
|
||||
--primary: oklch(0.55 0.15 230);
|
||||
--primary-foreground: oklch(0.98 0.01 90);
|
||||
--brand-400: oklch(0.6 0.13 230);
|
||||
--brand-500: oklch(0.55 0.15 230);
|
||||
--brand-600: oklch(0.5 0.17 230);
|
||||
|
||||
--secondary: oklch(0.92 0.01 90);
|
||||
--secondary-foreground: oklch(0.35 0.05 200);
|
||||
--muted: oklch(0.93 0.01 90);
|
||||
--muted-foreground: oklch(0.5 0.04 200);
|
||||
--accent: oklch(0.9 0.02 90);
|
||||
--accent-foreground: oklch(0.35 0.05 200);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.88 0.015 90);
|
||||
--border-glass: oklch(0.35 0.05 200 / 0.1);
|
||||
--input: oklch(0.97 0.008 90);
|
||||
--ring: oklch(0.55 0.15 230);
|
||||
|
||||
--chart-1: oklch(0.55 0.15 230);
|
||||
--chart-2: oklch(0.6 0.18 25);
|
||||
--chart-3: oklch(0.55 0.15 300);
|
||||
--chart-4: oklch(0.6 0.15 180);
|
||||
--chart-5: oklch(0.65 0.12 80);
|
||||
|
||||
--sidebar: oklch(0.96 0.01 90);
|
||||
--sidebar-foreground: oklch(0.35 0.05 200);
|
||||
--sidebar-primary: oklch(0.55 0.15 230);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 90);
|
||||
--sidebar-accent: oklch(0.92 0.01 90);
|
||||
--sidebar-accent-foreground: oklch(0.35 0.05 200);
|
||||
--sidebar-border: oklch(0.88 0.015 90);
|
||||
--sidebar-ring: oklch(0.55 0.15 230);
|
||||
|
||||
--action-view: oklch(0.55 0.15 230);
|
||||
--action-view-hover: oklch(0.5 0.17 230);
|
||||
--action-followup: oklch(0.6 0.18 25);
|
||||
--action-followup-hover: oklch(0.55 0.2 25);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
--running-indicator: oklch(0.55 0.15 230);
|
||||
--running-indicator-text: oklch(0.5 0.17 230);
|
||||
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.65 0.15 80);
|
||||
--status-warning-bg: oklch(0.65 0.15 80 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 230);
|
||||
--status-info-bg: oklch(0.55 0.15 230 / 0.15);
|
||||
--status-backlog: oklch(0.6 0.04 200);
|
||||
--status-in-progress: oklch(0.65 0.15 80);
|
||||
--status-waiting: oklch(0.6 0.12 50);
|
||||
}
|
||||
|
||||
.solarizedlight .content-bg {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.98 0.01 90),
|
||||
oklch(0.96 0.012 90),
|
||||
oklch(0.98 0.01 90)
|
||||
);
|
||||
}
|
||||
|
||||
.solarizedlight .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #268bd2 0%, #2aa198 50%, #268bd2 100%);
|
||||
}
|
||||
|
||||
.solarizedlight .animated-outline-inner {
|
||||
background: oklch(0.98 0.01 90) !important;
|
||||
color: #268bd2 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user