diff --git a/index.html b/index.html index 63caa79e..7e40621a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Trufos - +
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 41f21b0b..d876517f 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -1,10 +1,10 @@ -import '@/styles/tailwind.css'; -import '@/styles/global.css'; +import '@/styles/index.css'; import { Menubar } from '@/view/Menubar'; import { RequestWindow } from '@/view/RequestWindow'; import { SidebarProvider } from '@/components/ui/sidebar'; import { TooltipProvider } from '@/components/ui/tooltip'; import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable'; +import { ThemeProvider } from '@/contexts/ThemeContext'; import { useEffect, useState } from 'react'; const MIN_SIDEBAR_PIXELS = 300; @@ -32,18 +32,20 @@ export const App = () => { }, []); return ( - - - - - - - - - - - - - + + + + + + + + + + + + + + + ); }; diff --git a/src/renderer/components/shared/ThemeToggle.tsx b/src/renderer/components/shared/ThemeToggle.tsx new file mode 100644 index 00000000..b52af807 --- /dev/null +++ b/src/renderer/components/shared/ThemeToggle.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Button } from '@/components/ui/button'; +import { useTheme } from '@/contexts/ThemeContext'; + +const SunIcon = () => ( + + + + + + + + + + + +); + +const MoonIcon = () => ( + + + +); + +export const ThemeToggle: React.FC = () => { + const { theme, toggleTheme } = useTheme(); + + return ( + + ); +}; diff --git a/src/renderer/components/sidebar/FooterBar.tsx b/src/renderer/components/sidebar/FooterBar.tsx index e7dd0fc0..3ef37fa3 100644 --- a/src/renderer/components/sidebar/FooterBar.tsx +++ b/src/renderer/components/sidebar/FooterBar.tsx @@ -5,6 +5,7 @@ import { GithubIcon } from '@/components/icons'; import { SettingsModal } from '@/components/shared/settings/SettingsModal'; import { Divider } from '@/components/shared/Divider'; import { SidebarFooter } from '@/components/ui/sidebar'; +import { ThemeToggle } from '@/components/shared/ThemeToggle'; export function FooterBar() { const [appVersion, setAppVersion] = useState(undefined); @@ -17,12 +18,15 @@ export function FooterBar() {
- {/* Settings and icon on the left */} + {/* Settings and theme toggle on the left */}
Settings + {/*
+ +
*/}
diff --git a/src/renderer/components/ui/sonner.tsx b/src/renderer/components/ui/sonner.tsx index 025e268f..2e553b8a 100644 --- a/src/renderer/components/ui/sonner.tsx +++ b/src/renderer/components/ui/sonner.tsx @@ -1,10 +1,10 @@ -import { useTheme } from 'next-themes'; +import { useTheme } from '@/contexts/ThemeContext'; import { Toaster as Sonner } from 'sonner'; type ToasterProps = React.ComponentProps; const Toaster = ({ ...props }: ToasterProps) => { - const { theme = 'system' } = useTheme(); + const { theme } = useTheme(); return ( void; + toggleTheme: () => void; +} + +const ThemeContext = createContext(undefined); + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; + +interface ThemeProviderProps { + children: React.ReactNode; + defaultTheme?: Theme; +} + +export const ThemeProvider: React.FC = ({ + children, + defaultTheme = 'dark', +}) => { + const [theme, setTheme] = useState(defaultTheme); + + useEffect(() => { + const savedTheme = localStorage.getItem('theme') as Theme; + if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) { + setTheme(savedTheme); + } + }, []); + + useEffect(() => { + const root = document.documentElement; + + // Remove both classes first + root.classList.remove('light', 'dark'); + + // Add the current theme class + root.classList.add(theme); + + // Save to localStorage + localStorage.setItem('theme', theme); + + // Debug log + console.log('Theme changed to:', theme, 'Classes:', root.classList.toString()); + }, [theme]); + + const toggleTheme = () => { + setTheme((prev) => (prev === 'light' ? 'dark' : 'light')); + }; + + const value = { + theme, + setTheme, + toggleTheme, + }; + + return {children}; +}; diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 199df008..35bd62e3 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -1,16 +1,13 @@ import '@/logging/console'; import { enableMapSet } from 'immer'; - -enableMapSet(); - -import '@/styles/tailwind.css'; +enableMapSet(); // immer support for Map and Set import { createRoot } from 'react-dom/client'; import { App } from '@/App'; import { RendererEventService } from '@/services/event/renderer-event-service'; import { useCollectionStore } from '@/state/collectionStore'; import winston from 'winston'; -import('@/lib/monaco/config'); // lazy load monaco editor to improve startup time +import('@/lib/monaco/config.js'); // lazy load monaco editor to improve startup time // set up store const { initialize } = useCollectionStore.getState(); @@ -23,8 +20,6 @@ declare global { } } -document.getElementById('body')?.classList.add('dark'); - const container = document.getElementById('root'); const root = createRoot(container); diff --git a/src/renderer/lib/monaco/MonacoEditor.tsx b/src/renderer/lib/monaco/MonacoEditor.tsx index 57e4953e..9e7c9bd2 100644 --- a/src/renderer/lib/monaco/MonacoEditor.tsx +++ b/src/renderer/lib/monaco/MonacoEditor.tsx @@ -1,11 +1,8 @@ import { Editor, EditorProps } from '@monaco-editor/react'; +import { useTheme } from '@/contexts/ThemeContext'; export default function MonacoEditor(props: EditorProps) { - return ( - - ); + const { theme } = useTheme(); + + return ; } diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css deleted file mode 100644 index 900483db..00000000 --- a/src/renderer/styles/global.css +++ /dev/null @@ -1,78 +0,0 @@ -/* Add the following to your global CSS file */ - -/* Colors */ -.success { - color: var(--success); -} - -.error { - color: var(--error); -} - -.http-method-color-get { - color: var(--http-get); -} - -.http-method-color-put { - color: var(--http-put); -} - -.http-method-color-post { - color: var(--http-post); -} - -.http-method-color-delete { - color: var(--http-delete); -} - -.http-method-color-patch { - color: var(--http-patch); -} - -/* Tabs scrollbar styles */ -.tabs-scrollbar::-webkit-scrollbar { - width: 8px; /* Width of the scrollbar */ -} - -.tabs-scrollbar::-webkit-scrollbar-track { - background: transparent; /* Background of the scrollbar track */ -} - -.tabs-scrollbar::-webkit-scrollbar-thumb { - background: var(--disabled); /* Color of the scrollbar thumb */ - border-radius: 4px; /* Rounded corners for the thumb */ -} - -.tabs-scrollbar::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-hover); -} - -.scrollbar > .slider { - background: var(--disabled); - border-radius: 4px; -} - -.response-status { -} - -body { - font-family: "Lato", sans-serif; - color: var(--text-primary); - font-weight: 400; -} - -.sidebar-request-list-item { - color: var(--text-secondary); - font-size: 12px; -} - -.sidebar-request-list-item.selected { - background-color: var(--disabled); - color: var(--text-primary); -} - -.sidebar-item.selected { - background: hsl(var(--sidebar-primary)); - color: hsl(var(--sidebar-primary-foreground)); - font-weight: bold; -} diff --git a/src/renderer/styles/index.css b/src/renderer/styles/index.css new file mode 100644 index 00000000..ae099026 --- /dev/null +++ b/src/renderer/styles/index.css @@ -0,0 +1,333 @@ +@import 'tailwindcss'; + +@plugin 'tailwindcss-animate'; +@custom-variant dark (&:where(.dark, .dark *)); +@custom-variant light (&:where(.light, .light *)); + +@utility container { + margin-inline: auto; + padding-inline: 2rem; + @media (width >= theme(--breakpoint-sm)) { + max-width: none; + } + @media (width >= 1400px) { + max-width: 1400px; + } +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + font-feature-settings: + 'rlig' 1, + 'calt' 1; + font-family: 'Lato', sans-serif; + color: var(--text-primary); + font-weight: 400; + } + + /* Light Theme */ + :root { + --background: hsl(0 0% 100%); + --foreground: hsl(222.2 47.4% 11.2%); + + --danger: #ca464e; + --overlay: rgba(0, 0, 0, 0.8); + + --muted: hsl(210 40% 96.1%); + --muted-foreground: hsl(215.4 16.3% 46.9%); + + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(222.2 47.4% 11.2%); + + --border: hsl(214.3 31.8% 91.4%); + --input: hsl(214.3 31.8% 91.4%); + + --card: hsl(0 0% 100%); + --card-foreground: hsl(222.2 47.4% 11.2%); + + --primary: hsl(222.2 47.4% 11.2%); + --primary-foreground: hsl(210 40% 98%); + + --secondary: hsl(210 40% 96.1%); + --secondary-foreground: hsl(222.2 47.4% 11.2%); + + --accent: hsl(210 40% 96.1%); + --accent-foreground: hsl(222.2 47.4% 11.2%); + + --destructive: hsl(0 100% 50%); + --destructive-foreground: hsl(210 40% 98%); + + --ring: hsl(215 20.2% 65.1%); + + --divider: hsl(214.3 31.8% 91.4%); + + --radius: 0.5rem; + + --accent-primary: #0098ed; + --accent-secondary: #e5f5fd; + --accent-tertiary: #dbeafe; + + --background-primary: #ffffff; + --background-secondary: #f2f3f5; + --background-tertiary: #f1f5f9; + + --text-primary: #263e4c; + --text-secondary: #3d5563; + + --http-get: #2cbb00; + --http-put: #00a2d9; + --http-post: #853aff; + --http-delete: #f845a6; + --http-patch: #d88f00; + --disabled: #94a3b8; + + --success: #16a34a; + --error: #dc2626; + --warning: #d97706; + + /* Sidebar (slightly lifted from background-tertiary) */ + --sidebar-background: #f8f9fb; + --sidebar-foreground: hsl(222 34% 25%); + --sidebar-primary: hsl(222 47% 16%); + --sidebar-primary-foreground: hsl(0 0% 98%); + --sidebar-accent: hsl(213 45% 92%); + --sidebar-accent-foreground: hsl(222 34% 25%); + --sidebar-border: hsl(215 28% 88%); + --sidebar-ring: hsl(213 89% 58%); + + /* SVG / icon grayscale ramp tuned to new neutrals */ + --svg-dark-gray: #495057; + --svg-medium-gray: #6b7480; + --svg-gray: #5e6670; + --svg-dark-gray-2: #555c63; + --svg-light-gray: #b3bcc5; + --svg-teal: #0f4554; + + --tertiary: hsl(195 85% 48%); + --tertiary-foreground: hsl(0 0% 100%); + + --scrollbar-thumb-hover: rgba(0, 0, 0, 0.28); + color-scheme: light; + } + + /* Dark Theme */ + .dark { + --background: hsl(0 0% 6.67%); + --foreground: hsl(213 31% 91%); + + --overlay: rgba(0, 0, 0, 0.8); + + --muted: hsl(0 0% 20%); + --muted-foreground: hsl(0 0% 100%); + + --popover: hsl(224 71% 4%); + --popover-foreground: hsl(215 20.2% 65.1%); + + --border: hsl(0 0% 20%); + --input: hsl(216 34% 17%); + + --card: hsl(0 0% 12%); + --card-foreground: hsl(213 31% 91%); + + --primary: hsl(195 94% 72%); + --primary-foreground: hsl(0 0% 13%); + + --secondary: hsl(196.5 44.44% 17.65%); + --secondary-foreground: hsl(195 94% 72%); + + --accent: hsl(216 34% 17%); + --accent-foreground: hsl(210 40% 98%); + + --destructive: hsl(0 63% 31%); + --destructive-foreground: hsl(210 40% 98%); + + --ring: hsl(216 34% 17%); + + --divider: hsl(0 0% 20%); + + --accent-primary: #75d9fb; + --accent-secondary: #12b1e7; + --accent-tertiary: #193641; + + --background-primary: #111111; + --background-secondary: #1f1f1f; + --background-tertiary: transparent; + + --text-primary: #eeeeee; + --text-secondary: #bbbbbb; + + --http-get: #93f176; + --http-put: #37abff; + --http-post: #9f72fe; + --http-delete: #ee5c99; + --http-patch: #efa349; + --disabled: #444444; + + --success: #2bb361; + --error: #bd5151; + --warning: #f9aa2d; + + --svg-dark-gray: #282828; + --svg-medium-gray: #717070; + --svg-gray: #565656; + --svg-dark-gray-2: #474747; + --svg-light-gray: #828282; + --svg-teal: #1a3e4c; + + --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5); + + --sidebar-background: hsl(240 5.9% 10%); + --sidebar-foreground: hsl(240 4.8% 95.9%); + --sidebar-primary: hsl(224.3 76.3% 48%); + --sidebar-primary-foreground: hsl(0 0% 100%); + --sidebar-accent: hsl(240 3.7% 15.9%); + --sidebar-accent-foreground: hsl(240 4.8% 95.9%); + --sidebar-border: hsl(240 3.7% 15.9%); + --sidebar-ring: hsl(217.2 91.2% 59.8%); + + color-scheme: dark; + } +} + +/* Consolidated from former global.css */ +@layer utilities { + .success { + color: var(--success); + } + .error { + color: var(--error); + } + .http-method-color-get { + color: var(--http-get); + } + .http-method-color-put { + color: var(--http-put); + } + .http-method-color-post { + color: var(--http-post); + } + .http-method-color-delete { + color: var(--http-delete); + } + .http-method-color-patch { + color: var(--http-patch); + } + + /* Scrollbar (webkit) */ + .tabs-scrollbar::-webkit-scrollbar { + width: 8px; + } + .tabs-scrollbar::-webkit-scrollbar-track { + background: transparent; + } + .tabs-scrollbar::-webkit-scrollbar-thumb { + background: var(--disabled); + border-radius: 4px; + } + .tabs-scrollbar::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); + } + + .scrollbar > .slider { + background: var(--disabled); + border-radius: 4px; + } + + .sidebar-request-list-item { + color: var(--text-secondary); + font-size: 12px; + } + .sidebar-request-list-item.selected { + background-color: var(--disabled); + color: var(--text-primary); + } + .sidebar-item.selected { + background: var(--sidebar-primary); + color: var(--sidebar-primary-foreground); + font-weight: bold; + } +} + +/* Theme Variables */ +@theme { + --radius-lg: var(--radius); + --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) - 4px); + + --color-background: var(--background); + --color-background-primary: var(--background-primary); + --color-background-secondary: var(--background-secondary); + --color-background-tertiary: var(--background-tertiary); + + --color-foreground: var(--foreground); + + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + + --color-tertiary: var(--tertiary); + --color-tertiary-foreground: var(--tertiary-foreground); + + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-accent-primary: var(--accent-primary); + --color-accent-secondary: var(--accent-secondary); + --color-accent-tertiary: var(--accent-tertiary); + + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-divider: var(--divider); + + --color-text-primary: var(--text-primary); + --color-text-secondary: var(--text-secondary); + + --color-http-get: var(--http-get); + --color-http-put: var(--http-put); + --color-http-post: var(--http-post); + --color-http-delete: var(--http-delete); + --color-http-patch: var(--http-patch); + + --color-state-success: var(--success); + --color-state-error: var(--error); + --color-state-warning: var(--warning); + + --color-svg-dark-gray: var(--svg-dark-gray); + --color-svg-medium-gray: var(--svg-medium-gray); + --color-svg-gray: var(--svg-gray); + --color-svg-dark-gray-2: var(--svg-dark-gray-2); + --color-svg-light-gray: var(--svg-light-gray); + --color-svg-teal: var(--svg-teal); + + --color-danger: var(--danger); + --color-disabled: var(--disabled); + --color-overlay: var(--overlay); + + --color-sidebar: var(--sidebar-background); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} diff --git a/src/renderer/styles/index.d.ts b/src/renderer/styles/index.d.ts new file mode 100644 index 00000000..35306c6f --- /dev/null +++ b/src/renderer/styles/index.d.ts @@ -0,0 +1 @@ +declare module '*.css'; diff --git a/src/renderer/styles/tailwind.css b/src/renderer/styles/tailwind.css deleted file mode 100644 index 8d8afb3f..00000000 --- a/src/renderer/styles/tailwind.css +++ /dev/null @@ -1,295 +0,0 @@ -@import 'tailwindcss'; - -@plugin 'tailwindcss-animate'; - -@custom-variant dark (&:is(.dark *)); - -@utility container { - margin-inline: auto; - padding-inline: 2rem; - /* Fixed theme() function usage */ - @media (width >= theme(--breakpoint-sm)) { - max-width: none; - } - @media (width >= 1400px) { - max-width: 1400px; - } -} - -/* - The default border color has changed to `currentcolor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. -*/ -@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); - } -} - -@layer base { - /* Light theme moved under .light class so dark becomes default */ - .light { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --danger: #ff5555; - --overlay: rgba(0, 0, 0, 0.8); - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --radius: 0.5rem; - - width: 100vw; - height: 100vh; - - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; - --sidebar-primary: 240 5.9% 10%; - --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 240 4.8% 95.9%; - --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; - --sidebar-ring: 217.2 91.2% 59.8%; - /* Added missing vars for parity */ - --accent-primary: #0d8ec0; - --accent-secondary: #08739c; - --accent-tertiary: #e6f8fe; - --http-get: #228c22; - --http-put: #0066cc; - --http-post: #7a3ff2; - --http-delete: #d0345b; - --http-patch: #d88219; - --success: #1f874b; - --error: #c04040; - --warning: #d9901a; - --svg-dark-gray: #444444; - --svg-medium-gray: #777777; - --svg-gray: #666666; - --svg-dark-gray-2: #555555; - --svg-light-gray: #999999; - --svg-teal: #0f2f38; - --disabled: #cccccc; - --tertiary: 195 85% 48%; - --tertiary-foreground: 0 0% 100%; - --divider: 214.3 31.8% 91.4%; - color-scheme: light; - } - - :root { - /* Accent */ - --accent-primary: #75d9fb; - --accent-secondary: #12b1e7; - --accent-tertiary: #193641; - --overlay: rgba(0, 0, 0, 0.8); - - /* Background */ - --background-primary: #111111; - --background-secondary: #1f1f1f; - --background-tertiary: transparent; - - /* Text */ - --text-primary: #eeeeee; - --text-secondary: #bbbbbb; - - /* Additional */ - --http-get: #93f176; - --http-put: #37abff; - --http-post: #9f72fe; - --http-delete: #ee5c99; - --http-patch: #efa349; - --disabled: #444444; - - /* State */ - --success: #2bb361; - --error: #bd5151; - --warning: #f9aa2d; - - /* SVG Colors */ - --svg-dark-gray: #282828; - --svg-medium-gray: #717070; - --svg-gray: #565656; - --svg-dark-gray-2: #474747; - --svg-light-gray: #828282; - --svg-teal: #1a3e4c; - - /* Scrollbar */ - --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5); - - /* Old */ - --background: 0 0% 6.67%; - --foreground: 213 31% 91%; - - --muted: 0 0% 20%; - --muted-foreground: 0 0% 100%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 0 0% 20%; - --input: 216 34% 17%; - - --card: 0 0% 12%; - --card-foreground: 213 31% 91%; - - --primary: 195 94% 72%; - --primary-foreground: 0 0% 13%; - - --secondary: 196.5 44.44% 17.65%; - --secondary-foreground: 195 94% 72%; - - --tertiary: 195.21 85.54% 48.82%; - --tertiary-foreground: 0 0% 13%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --divider: 0 0% 20%; - - --radius: 0.5rem; - - --sidebar-background: 240 5.9% 10%; - - --sidebar-foreground: 240 4.8% 95.9%; - - --sidebar-primary: 224.3 76.3% 48%; - - --sidebar-primary-foreground: 0 0% 100%; - - --sidebar-accent: 240 3.7% 15.9%; - - --sidebar-accent-foreground: 240 4.8% 95.9%; - - --sidebar-border: 240 3.7% 15.9%; - - --sidebar-ring: 217.2 91.2% 59.8%; - color-scheme: dark; - } -} - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: - 'rlig' 1, - 'calt' 1; - } -} - -@theme { - --radius-lg: var(--radius); - --radius-md: calc(var(--radius) - 2px); - --radius-sm: calc(var(--radius) - 4px); - - --color-background: hsl(var(--background)); - --color-background-primary: var(--background-primary); - --color-background-secondary: var(--background-secondary); - --color-background-tertiary: var(--background-tertiary); - - --color-foreground: hsl(var(--foreground)); - - --color-card: hsl(var(--card)); - --color-card-foreground: hsl(var(--card-foreground)); - - --color-popover: hsl(var(--popover)); - --color-popover-foreground: hsl(var(--popover-foreground)); - - --color-primary: hsl(var(--primary)); - --color-primary-foreground: hsl(var(--primary-foreground)); - - --color-secondary: hsl(var(--secondary)); - --color-secondary-foreground: hsl(var(--secondary-foreground)); - - --color-tertiary: hsl(var(--tertiary)); - --color-tertiary-foreground: hsl(var(--tertiary-foreground)); - - --color-muted: hsl(var(--muted)); - --color-muted-foreground: hsl(var(--muted-foreground)); - - --color-accent: hsl(var(--accent)); - --color-accent-foreground: hsl(var(--accent-foreground)); - --color-accent-primary: var(--accent-primary); - --color-accent-secondary: var(--accent-secondary); - --color-accent-tertiary: var(--accent-tertiary); - - --color-destructive: hsl(var(--destructive)); - --color-destructive-foreground: hsl(var(--destructive-foreground)); - - --color-border: hsl(var(--border)); - --color-input: hsl(var(--input)); - --color-ring: hsl(var(--ring)); - --color-divider: hsl(var(--divider)); - - --color-text-primary: var(--text-primary); - --color-text-secondary: var(--text-secondary); - - --color-http-get: var(--http-get); - --color-http-put: var(--http-put); - --color-http-post: var(--http-post); - --color-http-delete: var(--http-delete); - --color-http-patch: var(--http-patch); - - --color-state-success: var(--success); - --color-state-error: var(--error); - --color-state-warning: var(--warning); - - --color-svg-dark-gray: var(--svg-dark-gray); - --color-svg-medium-gray: var(--svg-medium-gray); - --color-svg-gray: var(--svg-gray); - --color-svg-dark-gray-2: var(--svg-dark-gray-2); - --color-svg-light-gray: var(--svg-light-gray); - --color-svg-teal: var(--svg-teal); - - --color-danger: var(--danger); - --color-disabled: var(--disabled); - --color-overlay: var(--overlay); - - --color-sidebar: hsl(var(--sidebar-background)); - --color-sidebar-foreground: hsl(var(--sidebar-foreground)); - --color-sidebar-primary: hsl(var(--sidebar-primary)); - --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); - --color-sidebar-accent: hsl(var(--sidebar-accent)); - --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); - --color-sidebar-border: hsl(var(--sidebar-border)); - --color-sidebar-ring: hsl(var(--sidebar-ring)); -}