panels-origin/web-panel/themes/arctec.ts

import { definePreset } from "@primeuix/themes";
import Aura from "@primeuix/themes/aura";

const Arctec = definePreset(Aura, {
  primitive: {
    borderRadius: {
      none: "0",
      xs: "2px",
      sm: "4px",
      md: "6px",
      lg: "8px",
      xl: "10px",
    },
  },
  semantic: {
    primary: {
      50: "#eef5ff",
      100: "#d9e8ff",
      200: "#bcd6ff",
      300: "#8fbbff",
      400: "#5b94f5",
      500: "#2f6fe4",
      600: "#1f5fd1",
      700: "#194ca8",
      800: "#173f87",
      900: "#17366f",
      950: "#102348",
    },
    formField: {
      borderRadius: "{border.radius.sm}",
    },
    content: {
      borderRadius: "{border.radius.md}",
    },
    list: {
      option: {
        borderRadius: "{border.radius.sm}",
      },
    },
    navigation: {
      item: {
        borderRadius: "{border.radius.sm}",
      },
    },
    overlay: {
      select: { borderRadius: "{border.radius.md}" },
      popover: { borderRadius: "{border.radius.md}" },
      modal: { borderRadius: "{border.radius.lg}" },
    },
    colorScheme: {
      light: {
        primary: {
          color: "{primary.600}",
          inverseColor: "#ffffff",
          hoverColor: "{primary.700}",
          activeColor: "{primary.800}",
        },
        highlight: {
          background: "{primary.50}",
          focusBackground: "{primary.100}",
          color: "{primary.800}",
          focusColor: "{primary.900}",
        },
      },
      dark: {
        surface: {
          0: "#111b2e",
          50: "#152238",
          100: "#1a2744",
          200: "#243044",
          300: "#2d3b55",
          400: "#475569",
          500: "#64748b",
          600: "#94a3b8",
          700: "#cbd5e1",
          800: "#e2e8f0",
          900: "#f1f5f9",
          950: "#f8fafc",
        },
        primary: {
          color: "{primary.400}",
          inverseColor: "#0b1220",
          hoverColor: "{primary.300}",
          activeColor: "{primary.200}",
        },
        highlight: {
          background: "rgba(47, 111, 228, 0.18)",
          focusBackground: "rgba(47, 111, 228, 0.28)",
          color: "rgba(248, 250, 252, 0.94)",
          focusColor: "rgba(248, 250, 252, 0.98)",
        },
      },
    },
  },
  components: {
    button: { root: { borderRadius: "{border.radius.sm}" } },
    tag: { root: { borderRadius: "999px" } },
    chip: { root: { borderRadius: "999px" } },
    badge: { root: { borderRadius: "999px" } },
    dialog: { root: { borderRadius: "{border.radius.lg}" } },
    datatable: { headerCell: { borderColor: "{content.border.color}" } },
  },
  css: ({ dt }: { dt: (token: string) => string }) => `
    .p-datatable {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid ${dt("content.border.color")};
    }
    .p-tabs {
      border-radius: ${dt("content.border.radius")};
    }
    .p-tablist-tab-list {
      border-radius: ${dt("content.border.radius")} ${dt("content.border.radius")} 0 0;
    }
  `,
});

export default {
  preset: Arctec,
  options: { darkModeSelector: "html.dark" },
};