opf/openproject

View on GitHub
app/views/custom_styles/_primer_color_mapping.erb

Summary

Maintainability
Test Coverage
<style type="text/css">

  /* Overwrite Primer primitives */
  [data-color-mode] {
      --body-background: var(--bgColor-default);
      --body-font-color: var(--fgColor-default);
  }
  /* Override Primer variable to ensure compatibility with currently
     configured design outside of high contrast mode  */
  [data-color-mode]:not([data-light-theme=light_high_contrast]) {
    --fgColor-accent: var(--accent-color) !important;
    --control-checked-bgColor-rest: var(--control-checked-color) !important;
    --control-checked-bgColor-active: var(--control-checked-color) !important;
    --control-checked-bgColor-hover: var(--control-checked-color--major1) !important;
    --controlKnob-borderColor-checked: var(--control-checked-color) !important;
    --button-primary-bgColor-rest: var(--button--primary-background-color) !important;
    --button-primary-bgColor-hover: var(--button--primary-background-hover-color) !important;
    --button-primary-bgColor-disabled: var(--button--primary-background-disabled-color) !important;
  }
  [data-light-theme=light_high_contrast]{
    --avatar-border-color: var(--avatar-borderColor);
    --list-item-hover--border-color: var(--control-transparent-borderColor-hover);
    --list-item-hover--color: var(--fgColor-default);
    --inplace-edit--border-color: var(--borderColor-default);
    --ck-color-toolbar-border: var(--borderColor-default);
    --ck-color-base-border: var(--borderColor-default);
    --table-border-color: var(--borderColor-default);
    --toolbar-item--bg-color: var(--button-default-bgColor-rest);
    --toolbar-item--border-color: var(--borderColor-default);
    --header-border-bottom-width: 1px;
    --header-bg-color: var(--page-header-bgColor);
    --header-item-font-color: var(--fgColor-default);
    --header-item-bg-hover-color: var(--control-transparent-bgColor-hover);
    --header-item-font-hover-color: var(--fgColor-default);
    --header-border-bottom-color: var(--borderColor-muted) !important;
    --main-menu-bg-color: var(--page-header-bgColor);
    --main-menu-hover-font-color: var(--fgColor-default);
    --main-menu-bg-selected-background: var(--control-transparent-bgColor-hover);
    --main-menu-bg-hover-background: var(--control-transparent-bgColor-hover);
    --main-menu-font-color: var(--fgColor-default);
    --main-menu-selected-font-color: var(--fgColor-default);
    --main-menu-border-color: var(--borderColor-muted);
    --main-menu-resizer-color: var(--borderColor-muted);
    --main-menu-bg-selected-border: var(--borderColor-muted);
    --main-menu-hover-border-color: var(--fgColor-default) !important;
    --main-menu-fieldset-header-color: var(--fgColor-muted) !important;
    --main-menu-border-width: 1px;
    --button-default-borderColor-rest: var(--borderColor-default);
    --button--primary-background-hover-color: var(--button-primary-bgColor-hover);
    --button--primary-background-color: var(--button-primary-bgColor-rest);
    --button--active-border-color: var(--borderColor-default);
    --button--background-hover-color: var(--button-default-bgColor-hover);
    --button--background-color: var(--button-default-bgColor-rest);
    --accent-color: var(--fgColor-accent);
    --primary-button-color: var(--button-primary-bgColor-rest);
    --status-selector-border-color: var(--button-default-borderColor-rest);
    --link-text-decoration: underline;
  }
</style>