import { createApp } from "vue";
import { createPinia } from "pinia";
import DesignSystem from "@opencloud-eu/design-system";
import "@opencloud-eu/design-system/tailwind";
import "@opencloud-eu/design-system/dist/design-system.css";
import "./styles/opencloud-app.css";
import App from "./App.vue";

const app = createApp(App);

app.use(createPinia());
app.use(DesignSystem, {
  iconUrlPrefix: "/assets/",
  language: {
    initGettext: true,
    defaultLanguage: "en",
  },
  tokens: {
    roles: {
      primary: "#00677f",
      onPrimary: "#ffffff",
      primaryContainer: "#b7eaff",
      secondary: "#20434f",
      onSecondary: "#ffffff",
      secondaryContainer: "#cfe6f1",
      background: "#ffffff",
      onBackground: "#191c1d",
      surface: "#ffffff",
      onSurface: "#191c1d",
      surfaceContainer: "#f6f8fa",
      surfaceContainerHigh: "#f2f4f5",
      surfaceContainerHighest: "#eceef0",
      outline: "#70787c",
      outlineVariant: "#bfc8cc",
      chrome: "#20434f",
      onChrome: "#ffffff",
      error: "#ba1a1a",
      onError: "#ffffff",
    },
  },
});

app.mount("#root");