co-color.css

/**
 * COmanage Registry Default Colors
 *
 * Portions licensed to the University Corporation for Advanced Internet
 * Development, Inc. ("UCAID") under one or more contributor license agreements.
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * UCAID licenses this file to you under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with the
 * License. You may obtain a copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @link          https://www.internet2.edu/comanage COmanage Project
 * @package       registry
 * @since         COmanage registry v5.0.0
 * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 *
 * Color variables use the naming convention --cmg-color-[type][-optional number]
 *
 * Light and dark mode colors: 
 * :root sets the global defaults for light mode. 
 * The "html.dark-mode" section overrides all default variables for dark mode.  
 */

/* COmanage Light Color Scheme (default) */
:root {
  /* Basics */
  --cmg-color-body-bg: #fff;         /* Body background color (white) */
  --cmg-color-body-txt: #222;        /* Body text color (dark gray) */
  --cmg-color-headings: #444;        /* Headings color, material icons, de-emphasized links (dark gray) */
  --cmg-color-txt-soft: #666;        /* Disabled text or form fields (medium gray) - the lightest gray accessible on white */
  --cmg-color-txt-inverse: #fff;     /* Default color for inverted text (i.e. on dark backgrounds) */

  /* Banner and Spinner */
  --cmg-color-banner: #115791;       /* Registry v5.x banner color (blue) */
  --cmg-color-spinner: #9fc6e2;      /* spinner / loading animation (blue) */
  
  /* Links (primary) */
  --cmg-color-link: #06c;            /* primary hyperlink color (blue); accessible on backgrounds down to #e7e7e7 */
  --cmg-color-link-hover: #115791;   /* primary hyperlink hover color (blue); accessible on backgrounds down to #c9c9c9 */

  /* Buttons */
  --cmg-color-btn-bg-001: #115791;   /* primary button background color (blue), submit buttons, .btn-primary, pagination */
  --cmg-color-btn-bg-002: #000;      /* primary button hover color (black) */
  --cmg-color-btn-bg-003: #444;      /* common background color (gray) */
  --cmg-color-btn-004: #c33;         /* button (red) */
  
  /* General Background and Border Colors (Grayscale) */
  --cmg-color-bg-001: #fafafa; /* background color */
  --cmg-color-bg-002: #f8f8f8; /* background color */
  --cmg-color-bg-003: #f5f5f5; /* background color */
  --cmg-color-bg-004: #f2f2f2; /* background color */
  --cmg-color-bg-005: #eee;    /* background color */
  --cmg-color-bg-006: #ddd;    /* border color */
  --cmg-color-bg-007: #ccc;    /* border color */
  --cmg-color-bg-008: #bbb;    /* border color */
  --cmg-color-bg-009: #ededed; /* data-list background color */
  
  /* Highlights: Alerts, Notices, and Badges */
  --cmg-color-highlight-001: #c00;    /* forms: required and error icons (red) */
  --cmg-color-highlight-002: #ffd;    /* forms: focused input (yellow) */
  
  --cmg-color-highlight-003: #0B3556; /* alert: info text color (blue) */
  --cmg-color-highlight-004: #d4ecff; /* search bar active (blue) */
  --cmg-color-highlight-005: #212529; /* badge light (light gray) */

  --cmg-color-highlight-006: #b4ffba; /* alert: success (green) */
  --cmg-color-highlight-007: #0f5132; /* alert: success text color, badge outline (green) */
  --cmg-color-highlight-008: #acf4b2; /* alert: success border color (green) */

  --cmg-color-highlight-009: #fffeb4; /* alert: warning (yellow) */
  --cmg-color-highlight-010: #41412e; /* alert: warning text color (yellow) */
  --cmg-color-highlight-011: #f6f5ae; /* alert: warning border color (yellow) */

  --cmg-color-highlight-012: #ffd4d4; /* alert: danger (red) */
  --cmg-color-highlight-013: #e33;    /* title for deleted/archived (red) */
  --cmg-color-highlight-014: #dc3545; /* danger badge (red) */
  --cmg-color-highlight-015: #842029; /* alert: danger text color (red) */
  --cmg-color-highlight-016: #f8cece; /* alert: danger border color (red) */
  
  --cmg-color-highlight-017: #cee6f8; /* alert: info border color (blue) */
  --cmg-color-highlight-018: yellow;  /* autocomplete highlight for query text */
  
  /* Duet Date Picker Colors & Settings */
  --duet-color-primary: var(--cmg-color-btn-bg-001);
  --duet-color-text: var(--cmg-color-body-txt);
  --duet-color-text-active: var(--cmg-color-txt-inverse);
  --duet-color-placeholder: var(--cmg-color-txt-soft);
  --duet-color-button: var(--cmg-color-bg-003);
  --duet-color-surface: var(--cmg-color-body-bg);
  --duet-color-overlay: rgba(0, 0, 0, 0.8);
  --duet-color-border: var(--cmg-color-body-txt);

  --duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --duet-font-normal: 400;
  --duet-font-bold: 600;

  --duet-radius: 4px;
  --duet-z-index: 600;
}

/* COmange Dark Color Scheme */
html.dark-mode {
  /* Basics */
  --cmg-color-body-bg: #121212;      /* Body background color (very dark gray) */
  --cmg-color-body-txt: #96969b;     /* Body text color (light gray) */
  --cmg-color-headings: #a6a6ab;     /* Headings color, material icons, de-emphasized links (light gray) */
  --cmg-color-txt-soft: #888;        /* Disabled text or form fields (light gray) */
  --cmg-color-txt-inverse: #ddd;     /* Default color for inverted text (i.e. on dark backgrounds) - this remains similar */

  /* Banner and Spinner */
  --cmg-color-banner: #22222a;       /* Registry v5.x banner color (dark gray/blue) */
  --cmg-color-spinner: #4880bb;      /* spinner / loading animation (blue) */

  /* Links (primary) */
  --cmg-color-link: #6392C5;         /* primary hyperlink color (a less saturated blue); */
  --cmg-color-link-hover: #4880bb;   /* primary hyperlink hover color (blue); */

  /* Buttons */
  --cmg-color-btn-bg-001: #0d4573;   /* primary button background color (blue), submit buttons, .btn-primary, pagination */
  --cmg-color-btn-bg-002: #333;      /* primary button hover color (black) */
  --cmg-color-btn-bg-003: #eee;      /* common background color (gray) */
  --cmg-color-btn-004: #c33;         /* button (red) */

  /* General Background and Border Colors (Grayscale) */
  --cmg-color-bg-001: #121212; /* background color */
  --cmg-color-bg-002: #151515; /* background color */
  --cmg-color-bg-003: #181818; /* background color */
  --cmg-color-bg-004: #1a1a1a; /* background color */
  --cmg-color-bg-005: #222;    /* background color */
  --cmg-color-bg-006: #333;    /* border color */
  --cmg-color-bg-007: #444;    /* border color */
  --cmg-color-bg-008: #555;    /* border color */
  --cmg-color-bg-009: #222;    /* data-list background color */

  /* Highlights: Alerts, Notices, and Badges */
  --cmg-color-highlight-001: #bc6262; /* forms: required and error icons (red) */
  --cmg-color-highlight-002: #242400;    /* forms: focused input (yellow) */

  --cmg-color-highlight-003: #0B3556; /* alert: info text color (blue) */
  --cmg-color-highlight-004: #d4ecff; /* search bar active (blue) */
  --cmg-color-highlight-005: #ccc;    /* badge light (light gray) */

  --cmg-color-highlight-006: #97BF97; /* alert: success (green) */
  --cmg-color-highlight-007: #0f5132; /* alert: success text color, badge outline (green) */
  --cmg-color-highlight-008: #0f5132; /* alert: success border color (green) */

  --cmg-color-highlight-009: #fffeb4; /* alert: warning (yellow) */
  --cmg-color-highlight-010: #41412e; /* alert: warning text color (yellow) */
  --cmg-color-highlight-011: #f6f5ae; /* alert: warning border color (yellow) */

  --cmg-color-highlight-012: #ffd4d4; /* alert: danger (red) */
  --cmg-color-highlight-013: #e33;    /* title for deleted/archived (red) */
  --cmg-color-highlight-014: #dc3545; /* danger badge (red) */
  --cmg-color-highlight-015: #842029; /* alert: danger text color (red) */
  --cmg-color-highlight-016: #f8cece; /* alert: danger border color (red) */

  --cmg-color-highlight-017: #cee6f8; /* alert: info border color (blue) */
  --cmg-color-highlight-018: #cc0;    /* autocomplete highlight for query text */
  
  /* Bootstrap Overrides for Dark Mode */
  --bs-light-rgb: #151515;
}