From f56b30fdba2edc16bda2bedf92c466daf399c4a9 Mon Sep 17 00:00:00 2001 From: Zane <75694352+zanesq@users.noreply.github.com> Date: Thu, 22 May 2025 09:17:43 -0700 Subject: [PATCH] ui-v2: match tile / chart designs (#2633) --- .../src/assets/fonts/CashSansMono-Light.woff2 | Bin 0 -> 18788 bytes .../assets/fonts/CashSansMono-Regular.woff2 | Bin 0 -> 18624 bytes ui-v2/src/components/tiles/ChartTile.tsx | 114 +++-- ui-v2/src/components/tiles/PieChartTile.tsx | 212 +++++--- ui-v2/src/styles/main.css | 470 +++++++++--------- 5 files changed, 445 insertions(+), 351 deletions(-) create mode 100644 ui-v2/src/assets/fonts/CashSansMono-Light.woff2 create mode 100644 ui-v2/src/assets/fonts/CashSansMono-Regular.woff2 diff --git a/ui-v2/src/assets/fonts/CashSansMono-Light.woff2 b/ui-v2/src/assets/fonts/CashSansMono-Light.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..d0fd7f6d304365272de1f4a937f70311b43a2937 GIT binary patch literal 18788 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 X>~9-B;SX;nU4SFuYv-!$UH||9G}hd2 literal 0 HcmV?d00001 diff --git a/ui-v2/src/components/tiles/ChartTile.tsx b/ui-v2/src/components/tiles/ChartTile.tsx index a161658e59..ab27f170a8 100644 --- a/ui-v2/src/components/tiles/ChartTile.tsx +++ b/ui-v2/src/components/tiles/ChartTile.tsx @@ -1,7 +1,12 @@ import React from 'react'; import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts'; -import { ChartConfig, ChartContainer } from "@/components/ui/chart.tsx"; -import { BarChart, Bar, LineChart, Line, ResponsiveContainer, Tooltip } from 'recharts'; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/components/ui/chart"; +import { BarChart, Bar, LineChart, Line, CartesianGrid, XAxis, ResponsiveContainer } from 'recharts'; interface ChartTileProps { title: string; @@ -27,17 +32,14 @@ export default function ChartTile({ // Convert the data array to the format expected by recharts const chartData = data.map((value, index) => ({ value, - index: `Point ${index + 1}` + point: `P${index + 1}` })); - // Chart configuration + // Chart configuration with proper color variables const chartConfig = { value: { label: title, - theme: { - light: variant === 'line' ? '#0B54DE' : '#4CAF50', - dark: variant === 'line' ? '#00CAF7' : '#4CAF50' - } + color: variant === 'line' ? 'var(--chart-2)' : 'var(--chart-1)' } } satisfies ChartConfig; @@ -45,54 +47,94 @@ export default function ChartTile({
    {/* Header section with icon */}
    -
    +
    {icon}
    -
    {title}
    -
    +
    {title}
    +
    {value} - {trend && {trend}} + {trend && {trend}}
    {/* Chart Container */} -
    - - {variant === 'line' ? ( - - - - - ) : ( - - - - - )} +
    + + + {variant === 'line' ? ( + + + + + } + /> + + + ) : ( + + + + + } + /> + + + )} +
    diff --git a/ui-v2/src/components/tiles/PieChartTile.tsx b/ui-v2/src/components/tiles/PieChartTile.tsx index a161339f94..6d0e2d2a7b 100644 --- a/ui-v2/src/components/tiles/PieChartTile.tsx +++ b/ui-v2/src/components/tiles/PieChartTile.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useTimelineStyles } from '../../hooks/useTimelineStyles'; import { ChartConfig, ChartContainer } from "@/components/ui/chart"; -import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts'; +import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts'; interface PieChartSegment { value: number; @@ -16,6 +16,90 @@ interface PieChartTileProps { date?: Date; } +// Custom label renderer with connecting lines +const renderCustomizedLabel = ({ + cx, + cy, + midAngle, + innerRadius, + outerRadius, + percent, + payload, + fill, +}: any) => { + const RADIAN = Math.PI / 180; + const sin = Math.sin(-RADIAN * midAngle); + const cos = Math.cos(-RADIAN * midAngle); + + // Adjust these values to position labels closer to the pie + const labelOffset = 12; + const labelDistance = 18; + + // Calculate positions with shorter distances + const mx = cx + (outerRadius + labelOffset) * cos; + const my = cy + (outerRadius + labelOffset) * sin; + const ex = mx + (cos >= 0 ? 1 : -1) * labelDistance; + const ey = my; + + // Text anchor based on which side of the pie we're on + const textAnchor = cos >= 0 ? "start" : "end"; + + // Calculate percentage + const value = (percent * 100).toFixed(0); + + // Determine if label should be on top or bottom half for potential y-offset + const isTopHalf = my < cy; + const yOffset = isTopHalf ? -2 : 2; + + // Force specific adjustments for "In Progress" label if needed + const isInProgress = payload.name === "In Progress"; + const adjustedEx = isInProgress ? ex - 5 : ex; + + return ( + + {/* Label line - using absolute coordinates for reliability */} + + {/* Label text with adjusted position */} + = 0 ? 5 : -5)} + y={ey + yOffset} + textAnchor={textAnchor} + fill="var(--text-default)" + className="text-[10px]" + style={{ + pointerEvents: 'none', + }} + > + {payload.name} ({value}%) + + + ); +}; + +// Active shape renderer for hover effect +const renderActiveShape = (props: any) => { + const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props; + + return ( + + ); +}; + export default function PieChartTile({ title, icon, @@ -23,102 +107,96 @@ export default function PieChartTile({ date }: PieChartTileProps) { const { contentCardStyle } = useTimelineStyles(date); + const [activeIndex, setActiveIndex] = useState(0); - // Convert segments to the format expected by recharts - const chartData = segments.map(segment => ({ + // Convert segments to the format expected by recharts and assign chart colors + const chartData = segments.map((segment, index) => ({ name: segment.label, - value: segment.value + value: segment.value, + chartColor: `var(--chart-${index + 1})` // Use chart-1, chart-2, chart-3, etc. })); - // Create chart configuration with theme colors - const chartConfig = segments.reduce((config, segment) => { - config[segment.label] = { - label: segment.label, - color: segment.color - }; - return config; - }, {} as ChartConfig); + // Create chart configuration using the chart color variables + const chartConfig = { + [segments[0].label.toLowerCase()]: { + label: segments[0].label, + color: 'var(--chart-1)' + }, + [segments[1].label.toLowerCase()]: { + label: segments[1].label, + color: 'var(--chart-2)' + }, + [segments[2].label.toLowerCase()]: { + label: segments[2].label, + color: 'var(--chart-3)' + } + } satisfies ChartConfig; - // Custom tooltip formatter - const tooltipFormatter = (value: number, name: string) => { - const total = segments.reduce((sum, segment) => sum + segment.value, 0); - const percentage = ((value / total) * 100).toFixed(1); - return [`${percentage}%`, name]; + const onPieEnter = (_: any, index: number) => { + setActiveIndex(index); }; return (
    {/* Header */}
    -
    +
    {icon}
    -
    +
    {title}
    {/* Pie Chart */} -
    -
    +
    +
    - - - {segments.map((segment, index) => ( - - ))} - - - + + + + {chartData.map((entry, index) => ( + + ))} + + +
    - - {/* Legend */} -
    - {segments.map((segment, index) => { - const percentage = ((segment.value / segments.reduce((sum, s) => sum + s.value, 0)) * 100).toFixed(1); - return ( -
    -
    -
    - - {segment.label} - -
    - - {percentage}% - -
    - ); - })} -
    ); diff --git a/ui-v2/src/styles/main.css b/ui-v2/src/styles/main.css index 30758fb3de..997da1b413 100644 --- a/ui-v2/src/styles/main.css +++ b/ui-v2/src/styles/main.css @@ -3,167 +3,257 @@ @custom-variant dark (&:is(.dark *)); -@layer base { - :root { - overflow: hidden; - --spring-easing: linear( - 0, - 0.009, - 0.035 2.1%, - 0.141, - 0.281 6.7%, - 0.723 12.9%, - 0.938 16.7%, - 1.017, - 1.077, - 1.121, - 1.149 24.3%, - 1.159, - 1.163, - 1.161, - 1.154 29.9%, - 1.129 32.8%, - 1.051 39.6%, - 1.017 43.1%, - 0.991, - 0.977 51%, - 0.974 53.8%, - 0.975 57.1%, - 0.997 69.8%, - 1.003 76.9%, - 1.004 83.8%, - 1 - ); - --spring-duration: 1.333s; +@theme { + /* reset */ + --color-*: initial; - /* custom slate */ - --slate: #393838; + /* constants */ + --color-white: #ffffff; + --color-black: #000000; - /* block */ - --block-teal: #13bbaf; - --block-orange: #ff4f00; + /* slate */ + --color-slate-100: #f0f2f8; + --color-slate-200: #c8cdd6; + --color-slate-300: #a1a7b0; + --color-slate-400: #6e747e; + --color-slate-500: #4a4e54; + --color-slate-600: #2e2e2e; - /* start arcade colors */ - --constant-white: #ffffff; - --constant-black: #000000; - --grey-10: #101010; - --grey-20: #1e1e1e; - --grey-50: #666666; - --grey-60: #959595; - --grey-80: #cccccc; - --grey-85: #dadada; - --grey-90: #e8e8e8; - --grey-95: #f0f0f0; - --dark-grey-15: #1a1a1a; - --dark-grey-25: #232323; - --dark-grey-30: #2a2a2a; - --dark-grey-40: #333333; - --dark-grey-45: #595959; - --dark-grey-60: #878787; - --dark-grey-90: #e1e1e1; + /* utility */ + --color-red-100: #ff6b6b; + --color-red-200: #f94b4b; - --background-app: var(--constant-white); - --background-prominent: var(--grey-80); - --background-standard: var(--grey-90); - --background-subtle: var(--grey-95); - --background-app-inverse: var(--constant-black); - --background-subtle-inverse: var(--dark-grey-15); - --background-standard-inverse: var(--dark-grey-25); - --background-prominent-inverse: var(--dark-grey-40); + --color-blue-100: #7cacff; + --color-blue-200: #5c98f9; - --border-divider: var(--grey-90); - --border-inverse: var(--constant-white); - --border-prominent: var(--grey-10); - --border-standard: var(--grey-60); - --border-subtle: var(--grey-90); + --color-green-100: #a3d795; + --color-green-200: #91cb80; - --icon-disabled: var(--grey-60); - --icon-extra-subtle: var(--grey-60); - --icon-inverse: var(--constant-white); - --icon-prominent: var(--grey-10); - --icon-standard: var(--grey-20); - --icon-subtle: var(--grey-50); + --color-yellow-100: #ffd966; + --color-yellow-200: #fbcd44; +} - --text-placeholder: var(--grey-60); - --text-prominent: var(--grey-10); - --text-standard: var(--grey-20); - --text-standard-inverse: var(--dark-grey-90); - --text-subtle: var(--grey-50); - --text-subtle-inverse: var(--dark-grey-60); - --text-prominent-inverse: var(--constant-white); - } +:root { + overflow: hidden; - @media (prefers-color-scheme: dark) { - :root { - --background-app: var(--constant-black); - --background-prominent: var(--dark-grey-40); - --background-standard: var(--dark-grey-25); - --background-subtle: var(--dark-grey-15); - --background-app-inverse: var(--constant-white); - --background-subtle-inverse: var(--grey-95); - --background-standard-inverse: var(--grey-90); - --background-prominent-inverse: var(--grey-80); + /* shape */ + --radius: 0.5rem; - --border-divider: var(--dark-grey-25); - --border-inverse: var(--constant-black); - --border-prominent: var(--constant-white); - --border-standard: var(--dark-grey-45); - --border-subtle: var(--dark-grey-25); + /* theming accents */ + --background-accent: var(--color-black); + --border-accent: var(--color-black); + --text-accent: var(--color-black); - --icon-disabled: var(--dark-grey-45); - --icon-extra-subtle: var(--dark-grey-45); - --icon-inverse: var(--constant-black); - --icon-prominent: var(--constant-white); - --icon-standard: var(--dark-grey-90); - --icon-subtle: var(--dark-grey-60); + /* Semantic */ + --background-default: var(--color-white); + --background-medium: var(--color-slate-200); + --background-muted: var(--color-slate-100); + --background-inverse: var(--color-black); + --background-danger: var(--color-red-200); + --background-success: var(--color-green-200); + --background-info: var(--color-blue-200); + --background-warning: var(--color-yellow-200); - --text-placeholder: var(--dark-grey-45); - --text-prominent: var(--constant-white); - --text-standard: var(--dark-grey-90); - --text-standard-inverse: var(--grey-20); - --text-subtle: var(--dark-grey-60); - --text-subtle-inverse: var(--grey-50); - --text-prominent-inverse: var(--grey-20); - } - } + --border-default: var(--color-slate-200); + --border-input: var(--color-slate-200); + --border-strong: var(--color-slate-300); + --border-inverse: var(--color-black); + --border-danger: var(--color-red-200); + --border-success: var(--color-green-200); + --border-warning: var(--color-yellow-200); + --border-info: var(--color-blue-200); - body { - background-color: var(--background-app); - } + --text-default: var(--color-slate-600); + --text-muted: var(--color-slate-400); + --text-inverse: var(--color-white); + --text-danger: var(--color-red-200); + --text-success: var(--color-green-200); + --text-warning: var(--color-yellow-200); + --text-info: var(--color-blue-200); + + --ring: var(--border-strong); + + --chart-1: #f6b44a; + --chart-2: #7585ff; + --chart-3: #d76a6a; + --chart-4: #d185e0; + --chart-5: #91cb80; + + --sidebar: var(--background-default); + --sidebar-foreground: var(--text-default); + --sidebar-primary: var(--background-accent); + --sidebar-primary-foreground: var(--text-inverse); + --sidebar-accent: var(--background-muted); + --sidebar-accent-foreground: var(--text-default); + --sidebar-border: var(--border-default); + --sidebar-ring: var(--border-default); +} + +.dark { + /* theming accents */ + --background-accent: var(--color-white); + --border-accent: var(--color-white); + --text-accent: var(--color-white); + + /* semantic */ + --background-default: var(--color-black); + --background-medium: var(--color-slate-500); + --background-muted: var(--color-slate-600); + --background-inverse: var(--color-white); + --background-danger: var(--color-red-100); + --background-success: var(--color-green-100); + --background-info: var(--color-blue-100); + --background-warning: var(--color-yellow-100); + + --border-default: var(--color-slate-600); + --border-input: var(--color-slate-600); + --border-strong: var(--color-slate-200); + --border-inverse: var(--color-white); + --border-danger: var(--color-red-200); + --border-success: var(--color-green-200); + --border-warning: var(--color-yellow-200); + --border-info: var(--color-blue-200); + + --text-default: var(--color-white); + --text-muted: var(--color-slate-300); + --text-inverse: var(--color-black); + --text-danger: var(--color-red-100); + --text-success: var(--color-green-100); + --text-warning: var(--color-yellow-100); + --text-info: var(--color-blue-100); + + --ring: var(--border-strong); + + --chart-1: #f6b44a; + --chart-2: #7585ff; + --chart-3: #d76a6a; + --chart-4: #d185e0; + --chart-5: #91cb80; + + --sidebar: var(--background-default); + --sidebar-foreground: var(--text-default); + --sidebar-primary: var(--background-accent); + --sidebar-primary-foreground: var(--text-inverse); + --sidebar-accent: var(--background-muted); + --sidebar-accent-foreground: var(--text-default); + --sidebar-border: var(--border-default); + --sidebar-ring: var(--border-default); +} + +@theme inline { + /* semantic */ + --color-background-default: var(--background-default); + --color-background-medium: var(--background-medium); + --color-background-inverse: var(--background-inverse); + --color-background-muted: var(--background-muted); + --color-background-danger: var(--background-danger); + --color-background-success: var(--background-success); + --color-background-info: var(--background-info); + --color-background-warning: var(--background-warning); + + --color-background-accent: var(--background-accent); + --color-border-accent: var(--border-accent); + --color-text-accent: var(--text-accent); + + --color-border-default: var(--border-default); + --color-border-input: var(--border-input); + --color-border-strong: var(--border-strong); + --color-border-inverse: var(--border-inverse); + --color-border-danger: var(--border-danger); + --color-border-success: var(--border-success); + --color-border-warning: var(--border-warning); + --color-border-info: var(--border-info); + + --color-text-default: var(--text); + --color-text-muted: var(--text-muted); + --color-text-inverse: var(--text-inverse); + --color-text-danger: var(--text-danger); + --color-text-success: var(--text-success); + --color-text-warning: var(--text-warning); + --color-text-info: var(--text-info); + + /* fonts */ + --font-sans: "Cash Sans", sans-serif; + --font-mono: "Cash Sans Mono", monospace; + --font-serif: serif; + + /* shape */ + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + --color-ring: var(--ring); + + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + + --color-sidebar: var(--sidebar); + --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); } @font-face { - font-family: 'Cash Sans'; - src: - url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2) - format('woff2'), - url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff) - format('woff'); + font-family: "Cash Sans"; + src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Light.woff2) + format("woff2"), + url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Light.woff) + format("woff"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Cash Sans"; + src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2) + format("woff2"), + url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff) + format("woff"); font-weight: 400; font-style: normal; } @font-face { - font-family: 'Cash Sans'; - src: - url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2) - format('woff2'), - url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff'); + font-family: "Cash Sans"; + src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2) + format("woff2"), + url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) + format("woff"); font-weight: 500; font-style: normal; } @font-face { - font-family: 'Cash Sans Mono'; - src: - url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2) - format('woff2'), - url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff) - format('woff'); + font-family: "Cash Sans Mono"; + src: url(../assets/fonts/CashSansMono-Light.woff2) format("woff2"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Cash Sans Mono"; + src: url(../assets/fonts/CashSansMono-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; } +@layer base { + * { + @apply border-border-default; + } + body { + @apply bg-background-default text-text-default; + } +} + .titlebar-drag-region { -webkit-app-region: drag; height: 32px; @@ -173,119 +263,3 @@ left: 0; z-index: 50; } - -@theme inline { - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --color-background: var(--background); - --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-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --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); -} - -:root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); -} - -.dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); -} - -@layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } -}