import { css } from "@design.estate/dees-element";
import * as plugins from "./plugins.js";

export const dedocumentSharedStyle = css`
  :host {
    /* Primitive colors */
    --color-light: #ffffff;
    --color-dark: #333333;
    --color-grey: #dddddd;
    --color-grey-100: #dddddd;
    --color-red: #e4002b;

    /* Semantic colors */
    --color-primary-fg: var(--theme-color-primary-fg, var(--color-dark));
    --color-primary-bg: var(--theme-color-primary-bg, var(--color-light));
    --color-accent-fg: var(--theme-color-accent-fg, var(--color-light));
    --color-accent-bg: var(--theme-color-accent-bg, var(--color-red));

    /* Functional colors */
    --text-fg-color: var(--color-primary-fg);
    --text-bg-color: var(--color-primary-bg);
    --label-fg: var(--color-dark);
    --label-bg: var(--color-grey);
    --footer-separator-bg-color: var(--color-accent);
    --footer-separator-fg-color: var(--color-light);

    /* Functional variables */
    --DPI-FACTOR: ${plugins.shared.cmToPx(1)}px;
    --RIGHT-MARGIN: ${plugins.shared.cmToPx(2)}px;
    --LEFT-MARGIN: ${plugins.shared.cmToPx(2)}px;
    --text-font-family: var(--theme-text-font-family, "Exo 2");
    --text-font-size: var(--theme-text-font-size, 12px);

    color: var(--text-fg-color);
    background: var(--text-bg-color);
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
  }
`;