From 60a6c908e9fd71496ea44fb53e199d64e2d4157a Mon Sep 17 00:00:00 2001 From: david Date: Sat, 20 Sep 2025 12:43:37 +0200 Subject: [PATCH] Clientes y facturas de cliente --- .../customer-invoice/template-factura.hbs | 248 +++++++++++++++++ modules/customers/src/common/locales/en.json | 12 +- modules/customers/src/common/locales/es.json | 4 +- .../customers/src/web/pages/create/create.tsx | 9 +- .../update/customer-basic-info-fields.tsx | 12 +- .../pages/update/customer-contact-fields.tsx | 217 +++++++-------- .../customers/src/web/pages/update/update.tsx | 13 +- .../rdx-ui/src/components/form/TextField.tsx | 35 ++- .../src/components/form/form-content.tsx | 11 + packages/rdx-ui/src/components/form/index.tsx | 1 + packages/rdx-ui/src/components/grid/cell.tsx | 30 ++ packages/rdx-ui/src/components/grid/grid.tsx | 64 +++++ packages/rdx-ui/src/components/grid/index.ts | 2 + packages/rdx-ui/src/components/index.tsx | 1 + packages/shadcn-ui/src/components/input.tsx | 3 +- packages/shadcn-ui/src/styles/globals.css | 261 ++++++++++-------- 16 files changed, 665 insertions(+), 258 deletions(-) create mode 100644 modules/customer-invoices/src/api/application/use-cases/report/reporter/templates/customer-invoice/template-factura.hbs create mode 100644 packages/rdx-ui/src/components/form/form-content.tsx create mode 100644 packages/rdx-ui/src/components/grid/cell.tsx create mode 100644 packages/rdx-ui/src/components/grid/grid.tsx create mode 100644 packages/rdx-ui/src/components/grid/index.ts diff --git a/modules/customer-invoices/src/api/application/use-cases/report/reporter/templates/customer-invoice/template-factura.hbs b/modules/customer-invoices/src/api/application/use-cases/report/reporter/templates/customer-invoice/template-factura.hbs new file mode 100644 index 00000000..b7dd4308 --- /dev/null +++ b/modules/customer-invoices/src/api/application/use-cases/report/reporter/templates/customer-invoice/template-factura.hbs @@ -0,0 +1,248 @@ + + + + + + + Factura F26200 + + + + + +
+ +
+ +
+
+ +
+ +
+ +
+ + TOTAL: {{total_amount}} +
+
+
+ + + + + + + + + + + + + + {{#each items}} + + + + + + + + {{/each}} + +
ConceptoCantidadPrecio unidadImporte total
{{description}}{{#if quantity}}{{quantity}}{{else}} {{/if}}{{#if unit_amount}}{{unit_amount}}{{else}} {{/if}}{{#if total_amount}}{{total_amount}}{{else}} {{/if}}
+
+ +
+ +
+
+

Forma de pago: {{payment_method}}

+
+
+

Notas: {{notes}}

+
+
+ +
+ + + {{#if discount_percentage}} + + + + + + + + + + + {{else}} + + {{/if}} + + + + + + + + + + + + + + + + +
Importe neto {{subtotal_amount}}
Descuento {{discount_percentage}} {{discount_amount.value}}
Base imponible {{taxable_amount}}
IVA 21% {{taxes_amount}}
+ Total factura +   + {{total_amount}}
+
+
+
+ + + + + + \ No newline at end of file diff --git a/modules/customers/src/common/locales/en.json b/modules/customers/src/common/locales/en.json index 9b87f3ee..bc8b0426 100644 --- a/modules/customers/src/common/locales/en.json +++ b/modules/customers/src/common/locales/en.json @@ -1,5 +1,9 @@ { - "common": {}, + "common": { + "more_details": "More details", + "back_to_list": "Back to the list", + "save": "Guardar" + }, "pages": { "title": "Customers", "description": "Manage your customers", @@ -19,13 +23,11 @@ }, "create": { "title": "New customer", - "description": "Create a new customer", - "back_to_list": "Back to the list" + "description": "Create a new customer" }, "update": { "title": "Update customer", - "description": "Update a customer", - "back_to_list": "Back to the list" + "description": "Update a customer" } }, "form_fields": { diff --git a/modules/customers/src/common/locales/es.json b/modules/customers/src/common/locales/es.json index fe629cc9..edf4ddc1 100644 --- a/modules/customers/src/common/locales/es.json +++ b/modules/customers/src/common/locales/es.json @@ -1,5 +1,7 @@ { - "common": {}, + "common": { + "more_details": "Más detalles" + }, "pages": { "title": "Clientes", "description": "Gestiona tus clientes", diff --git a/modules/customers/src/web/pages/create/create.tsx b/modules/customers/src/web/pages/create/create.tsx index 6b4a61bf..7bc3f2ed 100644 --- a/modules/customers/src/web/pages/create/create.tsx +++ b/modules/customers/src/web/pages/create/create.tsx @@ -1,4 +1,4 @@ -import { AppBreadcrumb, AppContent, BackHistoryButton, ButtonGroup } from "@repo/rdx-ui/components"; +import { AppBreadcrumb, AppContent, ButtonGroup } from "@repo/rdx-ui/components"; import { Button } from "@repo/shadcn-ui/components"; import { useNavigate } from "react-router-dom"; @@ -63,9 +63,12 @@ export const CustomerCreate = () => {

- + + diff --git a/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx b/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx index 3eedb5f4..10ec6dd6 100644 --- a/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx +++ b/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx @@ -36,22 +36,22 @@ export const CustomerBasicInfoFields = ({ control }: { control: any }) => { - + - + {t("form_fields.customer_type.company")} - + - + {t("form_fields.customer_type.individual")} diff --git a/modules/customers/src/web/pages/update/customer-contact-fields.tsx b/modules/customers/src/web/pages/update/customer-contact-fields.tsx index 621454d9..02f3f531 100644 --- a/modules/customers/src/web/pages/update/customer-contact-fields.tsx +++ b/modules/customers/src/web/pages/update/customer-contact-fields.tsx @@ -7,16 +7,10 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger, - FormControl, - FormField, - FormItem, - FormLabel, - FormMessage, } from "@repo/shadcn-ui/components"; import { TextField } from "@repo/rdx-ui/components"; -import { Input } from "@repo/shadcn-ui/components"; -import { ChevronDown, Phone } from "lucide-react"; +import { ChevronDown, MailIcon, PhoneIcon, SmartphoneIcon } from "lucide-react"; import { useState } from "react"; import { useTranslation } from "../../i18n"; @@ -30,121 +24,114 @@ export function CustomerContactFields({ control }: { control: any }) { {t("form_groups.contact_info.title")} {t("form_groups.contact_info.description")} - + +
+ + } + /> + + } + /> + + + } + /> +
+
+ + } + /> + + } + /> + + } + /> +
+ - - Más detalles{" "} + + {t("common.more_details")}{" "} -
- ( - - Teléfono secundario - - } - {...field} - /> - - - - )} - /> - ( - - Móvil secundario - - } - {...field} - /> - - - - )} - /> - ( - - Fax - - - - - - )} - /> +
+
+ +
+
+ +
- - - - - - - - - ); diff --git a/modules/customers/src/web/pages/update/update.tsx b/modules/customers/src/web/pages/update/update.tsx index 21fa770d..982f0b83 100644 --- a/modules/customers/src/web/pages/update/update.tsx +++ b/modules/customers/src/web/pages/update/update.tsx @@ -104,7 +104,16 @@ export const CustomerUpdate = () => {

- + + diff --git a/packages/rdx-ui/src/components/form/TextField.tsx b/packages/rdx-ui/src/components/form/TextField.tsx index 11ceef88..43461d02 100644 --- a/packages/rdx-ui/src/components/form/TextField.tsx +++ b/packages/rdx-ui/src/components/form/TextField.tsx @@ -21,6 +21,9 @@ type TextFieldProps = { required?: boolean; readOnly?: boolean; className?: string; + + icon?: React.ReactNode; // Icono con tamaño: + iconPosition?: "left" | "right"; // 'left' por defecto }; export function TextField({ @@ -33,10 +36,16 @@ export function TextField({ required = false, readOnly = false, className, + icon, + iconPosition = "left", }: TextFieldProps) { const { t } = useTranslation(); const isDisabled = disabled || readOnly; + const hasIcon = Boolean(icon); + const isLeft = iconPosition === "left"; + const inputPadding = hasIcon ? (isLeft ? "pl-10" : "pr-10") : ""; + const { getFieldState } = control; const state = getFieldState(name); @@ -53,12 +62,26 @@ export function TextField({ )} - +
+ + + {hasIcon && ( + + )} +

diff --git a/packages/rdx-ui/src/components/form/form-content.tsx b/packages/rdx-ui/src/components/form/form-content.tsx new file mode 100644 index 00000000..df256247 --- /dev/null +++ b/packages/rdx-ui/src/components/form/form-content.tsx @@ -0,0 +1,11 @@ +import { cn } from "@repo/shadcn-ui/lib/utils"; + +export function FormContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ); +} diff --git a/packages/rdx-ui/src/components/form/index.tsx b/packages/rdx-ui/src/components/form/index.tsx index 8637e04d..037e1d71 100644 --- a/packages/rdx-ui/src/components/form/index.tsx +++ b/packages/rdx-ui/src/components/form/index.tsx @@ -1,5 +1,6 @@ export * from "./DatePickerField.tsx"; export * from "./DatePickerInputField.tsx"; +export * from "./form-content.tsx"; export * from "./SelectField.tsx"; export * from "./TextAreaField.tsx"; export * from "./TextField.tsx"; diff --git a/packages/rdx-ui/src/components/grid/cell.tsx b/packages/rdx-ui/src/components/grid/cell.tsx new file mode 100644 index 00000000..93ab1d6a --- /dev/null +++ b/packages/rdx-ui/src/components/grid/cell.tsx @@ -0,0 +1,30 @@ +import { cn } from "@repo/shadcn-ui/lib/utils"; +import * as React from "react"; + +/** 1–12 spans por breakpoint */ +export type Spans = Partial<{ base: number; sm: number; md: number; lg: number; xl: number }>; + +function to12(n?: number) { + if (!n) return 12; + return n < 1 ? 1 : n > 12 ? 12 : n; +} + +function spansToClasses(spans?: Spans) { + const s = spans ?? { base: 12 }; + const parts: string[] = []; + if (s.base) parts.push(`col-span-${to12(s.base)}`); + if (s.sm) parts.push(`sm:col-span-${to12(s.sm)}`); + if (s.md) parts.push(`md:col-span-${to12(s.md)}`); + if (s.lg) parts.push(`lg:col-span-${to12(s.lg)}`); + if (s.xl) parts.push(`xl:col-span-${to12(s.xl)}`); + return parts.join(" "); +} + +export interface CellProps extends React.HTMLAttributes { + /** 1–12 por breakpoint (p.ej. { base:12, sm:6, xl:3 }) */ + span?: Spans; +} + +export function Cell({ span, className, ...rest }: CellProps) { + return
; +} diff --git a/packages/rdx-ui/src/components/grid/grid.tsx b/packages/rdx-ui/src/components/grid/grid.tsx new file mode 100644 index 00000000..81c9dfb6 --- /dev/null +++ b/packages/rdx-ui/src/components/grid/grid.tsx @@ -0,0 +1,64 @@ +import { cn } from "@repo/shadcn-ui/lib/utils"; +import { type VariantProps, cva } from "class-variance-authority"; +import * as React from "react"; + +/** 1–12 columnas por breakpoint */ +export type Cols = Partial<{ base: number; sm: number; md: number; lg: number; xl: number }>; + +const gridBase = cva("grid", { + variants: { + gap: { + 0: "gap-0", + 1: "gap-1", + 2: "gap-2", + 3: "gap-3", + 4: "gap-4", + 5: "gap-5", + 6: "gap-6", + 8: "gap-8", + 10: "gap-10", + }, + align: { + start: "items-start", + center: "items-center", + end: "items-end", + stretch: "items-stretch", + }, + }, + defaultVariants: { + gap: 6, + align: "stretch", + }, +}); + +function to12(n?: number) { + if (!n) return 12; + return n < 1 ? 1 : n > 12 ? 12 : n; +} + +function colsToClasses(cols?: Cols) { + if (!cols) return ""; + const c: string[] = []; + if (cols.base) c.push(`grid-cols-${to12(cols.base)}`); + if (cols.sm) c.push(`sm:grid-cols-${to12(cols.sm)}`); + if (cols.md) c.push(`md:grid-cols-${to12(cols.md)}`); + if (cols.lg) c.push(`lg:grid-cols-${to12(cols.lg)}`); + if (cols.xl) c.push(`xl:grid-cols-${to12(cols.xl)}`); + return c.join(" "); +} + +export interface GridProps + extends Omit, "children">, + VariantProps { + cols?: Cols; + children?: React.ReactNode; +} + +/** Grid genérico: controla columnas visibles por breakpoint */ +export function Grid({ className, cols, gap, align, children, ...rest }: GridProps) { + return ( +
+ {children} +
+ ); +} diff --git a/packages/rdx-ui/src/components/grid/index.ts b/packages/rdx-ui/src/components/grid/index.ts new file mode 100644 index 00000000..bc2467ea --- /dev/null +++ b/packages/rdx-ui/src/components/grid/index.ts @@ -0,0 +1,2 @@ +export * from "./cell.tsx"; +export * from "./grid.tsx"; diff --git a/packages/rdx-ui/src/components/index.tsx b/packages/rdx-ui/src/components/index.tsx index a2cab425..37379f42 100644 --- a/packages/rdx-ui/src/components/index.tsx +++ b/packages/rdx-ui/src/components/index.tsx @@ -3,6 +3,7 @@ export * from "./custom-dialog.tsx"; export * from "./datatable/index.tsx"; export * from "./error-overlay.tsx"; export * from "./form/index.tsx"; +export * from "./grid/index.ts"; export * from "./layout/index.tsx"; export * from "./loading-overlay/index.tsx"; export * from "./lookup-dialog/index.tsx"; diff --git a/packages/shadcn-ui/src/components/input.tsx b/packages/shadcn-ui/src/components/input.tsx index 64053b9f..bbf24d6c 100644 --- a/packages/shadcn-ui/src/components/input.tsx +++ b/packages/shadcn-ui/src/components/input.tsx @@ -8,8 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { type={type} data-slot='input' className={cn( - "bg-input text-foreground", - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className diff --git a/packages/shadcn-ui/src/styles/globals.css b/packages/shadcn-ui/src/styles/globals.css index 60d38ddb..281f5434 100644 --- a/packages/shadcn-ui/src/styles/globals.css +++ b/packages/shadcn-ui/src/styles/globals.css @@ -4,26 +4,13 @@ @custom-variant dark (&:is(.dark *)); /** - * - * https://www.windpalette.com/app - - https://themecn.dev/dashboard?theme=eyJsIjp7ImJnIjoiMCwwLDEwMCIsImZnIjoiMjI2LDEwLDQiLCJwIjoiMjI2LDEwMCw1NSIsInMiOiIyMjYsMjUsOTUiLCJhIjoiMjI2LDEwMCw4NSIsImQiOiIzNTcuMTgsMTAwLDQ1In0sImYiOlsiTGF0byIsIlBvcHBpbnMiXSwiciI6MC41fQ== - -**/ + * + * https://tweakcn.com/ + * https://themux.vercel.app/shadcn-themes + * + **/ @theme { - --sapphire-50: #f2f5ff; - --sapphire-100: #e3eaff; - --sapphire-200: #c6d4ff; - --sapphire-300: #a1b8ff; - --sapphire-400: #7696ff; - --sapphire-500: #4b74ff; - --sapphire-600: #2152ff; - --sapphire-700: #0033e6; - --sapphire-800: #0029cc; - --sapphire-900: #001f99; - --sapphire-950: #001466; - --graphite-50: #f8f9fc; --graphite-100: #f1f2f9; --graphite-200: #e2e4f0; @@ -49,115 +36,153 @@ --magenta-950: #660031; } -@theme inline { - --font-sans: Roboto, sans-serif; - --font-serif: Domine, serif; - --font-mono: "Roboto Mono", monospace; +:root { + --background: oklch(1 0 0); + --foreground: oklch(13.636% 0.02685 282.25); + --card: oklch(1.0 0 0); + --card-foreground: oklch(0.2035 0.0139 285.1021); + --popover: oklch(1.0 0 0); + --popover-foreground: oklch(0.2035 0.0139 285.1021); + --primary: oklch(0.623 0.214 259.815); + --primary-foreground: oklch(1.0 0 0); + --secondary: oklch(0.9574 0.0011 197.1383); + --secondary-foreground: oklch(0.2069 0.0098 285.5081); + --muted: oklch(0.9674 0.0013 286.3752); + --muted-foreground: oklch(0.5466 0.0216 285.664); + --accent: oklch(0.9674 0.0013 286.3752); + --accent-foreground: oklch(0.2069 0.0098 285.5081); + --destructive: oklch(0.583 0.2387 28.4765); + --destructive-foreground: oklch(1.0 0 0); + --border: oklch(0.9173 0.0067 286.2663); + --input: oklch(0.9173 0.0067 286.2663); + --ring: oklch(0.6187 0.2067 259.2316); + --chart-1: oklch(0.6471 0.2173 36.8511); + --chart-2: oklch(37.973% 0.0506 187.591); + --chart-3: oklch(0.4247 0.0852 230.5827); + --chart-4: oklch(0.829 0.1712 81.0381); + --chart-5: oklch(0.7724 0.1728 65.367); + --sidebar: oklch(0.957 0.007 272.5840410480741); + --sidebar-foreground: oklch(0.2035 0.0139 285.1021); + --sidebar-primary: oklch(0.623 0.214 259.815); + --sidebar-primary-foreground: oklch(1.0 0 0); + --sidebar-accent: oklch(0.9674 0.0013 286.3752); + --sidebar-accent-foreground: oklch(0.2069 0.0098 285.5081); + --sidebar-border: oklch(0.9173 0.0067 286.2663); + --sidebar-ring: oklch(0.623 0.214 259.815); + --font-sans: Roboto Flex, ui-sans-serif, sans-serif, system-ui; + --font-serif: Adamina, ui-serif, serif; + --font-mono: Roboto Mono, ui-monospace, monospace; + --radius: 0.5rem; + --shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1); + --shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1); + --shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1); + --shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25); + --tracking-normal: 0em; + --spacing: 0.25rem; +} +.dark { + --background: oklch(0.1448 0 0); + --foreground: oklch(0.9851 0 0); + --card: oklch(0.2046 0 0); + --card-foreground: oklch(0.9851 0 0); + --popover: oklch(0.2046 0 0); + --popover-foreground: oklch(0.9851 0 0); + --primary: oklch(0.5471 0.2506 262.8726); + --primary-foreground: oklch(0.9705 0.0142 254.6042); + --secondary: oklch(0.2707 0.0092 285.7705); + --secondary-foreground: oklch(0.9851 0 0); + --muted: oklch(0.2686 0 0); + --muted-foreground: oklch(0.709 0 0); + --accent: oklch(0.2686 0 0); + --accent-foreground: oklch(0.9851 0 0); + --destructive: oklch(0.7022 0.1892 22.2279); + --destructive-foreground: oklch(0.2558 0.0412 235.1561); + --border: oklch(1.0 0 0); + --input: oklch(1.0 0 0); + --ring: oklch(0.4915 0.2776 263.8724); + --chart-1: oklch(0.4915 0.2776 263.8724); + --chart-2: oklch(0.7019 0.1577 160.4375); + --chart-3: oklch(0.7724 0.1728 65.367); + --chart-4: oklch(0.6217 0.2589 305.309); + --chart-5: oklch(0.6435 0.2452 16.501); + --sidebar: oklch(0.2046 0 0); + --sidebar-foreground: oklch(0.9851 0 0); + --sidebar-primary: oklch(0.5471 0.2506 262.8726); + --sidebar-primary-foreground: oklch(0.9705 0.0142 254.6042); + --sidebar-accent: oklch(0.2686 0 0); + --sidebar-accent-foreground: oklch(0.9851 0 0); + --sidebar-border: oklch(1.0 0 0); + --sidebar-ring: oklch(0.4915 0.2776 263.8724); + --font-sans: Roboto Flex, ui-sans-serif, sans-serif, system-ui; + --font-serif: Lora, serif; + --font-mono: Roboto Mono, ui-monospace, monospace; + --radius: 0.4rem; + --shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1); + --shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1); + --shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1); + --shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25); +} + +@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-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-destructive-foreground: var(--destructive-foreground); + --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); + + --font-sans: var(--font-sans); + --font-mono: var(--font-mono); + --font-serif: var(--font-serif); + --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); -} -:root { - --radius: 0.3rem; - --background: oklch(1.0 0.0 0); - --foreground: oklch(0.143 0.003 271.9282674829111); - --card: oklch(0.977 0.007 272.5840410480741); - --card-foreground: oklch(0.143 0.003 271.9282674829111); - --popover: oklch(1.0 0.0 0); - --popover-foreground: oklch(0.143 0.003 271.9282674829111); - --primary: oklch(0.527 0.263 264.6358829854314); - --primary-foreground: oklch(0.96 0.003 272.6281326778613); - --secondary: oklch(0.957 0.007 272.5840410480741); - --secondary-foreground: oklch(0.2 0.024 271.03952637990255); - --muted: oklch(0.957 0.007 272.5840410480741); - --muted-foreground: oklch(0.501 0.087 270.1873691459851); - --accent: oklch(0.893 0.011 270.0165724649083); - --accent-foreground: oklch(0.194 0.039 267.55460547761646); - --destructive: oklch(0.58 0.237 28.43022926835137); - --border: oklch(0.87 0.021 272.39716219522893); - --input: oklch(0.87 0.021 272.39716219522893); - --ring: oklch(0.527 0.263 264.6358829854314); - --chart-1: oklch(0.527 0.263 264.6358829854314); - --chart-2: oklch(0.587 0.17 268.089554204009); - --chart-3: oklch(0.698 0.107 270.5337309213311); - --chart-4: oklch(0.344 0.167 264.8096356890612); - --chart-5: oklch(0.265 0.121 265.17321408623843); - --sidebar: oklch(0.957 0.007 272.5840410480741); - --sidebar-foreground: oklch(0.2 0.024 271.03952637990255); - --sidebar-primary: oklch(0.527 0.263 264.6358829854314); - --sidebar-primary-foreground: oklch(0.96 0.003 272.6281326778613); - --sidebar-accent: oklch(0.893 0.011 270.0165724649083); - --sidebar-accent-foreground: oklch(0.194 0.039 267.55460547761646); - --sidebar-border: oklch(0.87 0.021 272.39716219522893); - --sidebar-ring: oklch(0.527 0.263 264.6358829854314); -} - -.dark { - --background: oklch(0.18 0.02 271.2071690195347); - --foreground: oklch(0.96 0.003 272.6281326778613); - --card: oklch(0.219 0.028 270.9064636444989); - --card-foreground: oklch(0.96 0.003 272.6281326778613); - --popover: oklch(0.219 0.028 270.9064636444989); - --popover-foreground: oklch(0.96 0.003 272.6281326778613); - --primary: oklch(0.572 0.216 266.49817452939124); - --primary-foreground: oklch(0.96 0.003 272.6281326778613); - --secondary: oklch(0.297 0.037 271.01211769802813); - --secondary-foreground: oklch(0.956 0.008 272.5689802513852); - --muted: oklch(0.297 0.037 271.01211769802813); - --muted-foreground: oklch(0.703 0.031 272.154700569603); - --accent: oklch(0.645 0.061 269.1114142997618); - --accent-foreground: oklch(0.953 0.013 270.00473513692674); - --destructive: oklch(0.58 0.237 28.43022926835137); - --border: oklch(0.38 0.062 270.35456036349854); - --input: oklch(0.38 0.062 270.35456036349854); - --ring: oklch(0.572 0.216 266.49817452939124); - --chart-1: oklch(0.572 0.216 266.49817452939124); - --chart-2: oklch(0.628 0.168 268.4986758327506); - --chart-3: oklch(0.728 0.124 270.22825208762697); - --chart-4: oklch(0.388 0.15 266.35164847353985); - --chart-5: oklch(0.32 0.089 268.3276964633901); - --sidebar: oklch(0.293 0.044 270.5701620578212); - --sidebar-foreground: oklch(0.96 0.003 272.6281326778613); - --sidebar-primary: oklch(0.572 0.216 266.49817452939124); - --sidebar-primary-foreground: oklch(0.96 0.003 272.6281326778613); - --sidebar-accent: oklch(0.645 0.061 269.1114142997618); - --sidebar-accent-foreground: oklch(0.953 0.013 270.00473513692674); - --sidebar-border: oklch(0.38 0.062 270.35456036349854); - --sidebar-ring: oklch(0.572 0.216 266.49817452939124); + --shadow-2xs: var(--shadow-2xs); + --shadow-xs: var(--shadow-xs); + --shadow-sm: var(--shadow-sm); + --shadow: var(--shadow); + --shadow-md: var(--shadow-md); + --shadow-lg: var(--shadow-lg); + --shadow-xl: var(--shadow-xl); + --shadow-2xl: var(--shadow-2xl); } @layer base {