sunrize/src/assets/themes/system-colors.css

A Multi-Platform X3D Editor

@charset "utf-8";

@media (prefers-color-scheme: light) {
  body {
    /* Colors */

    --system-red: rgb(255, 59, 48);
    --system-orange: rgb(255, 149, 0);
    --system-yellow: rgb(255, 214, 10);
    --system-green: rgb(52, 199, 89);
    --system-mint: rgb(0, 199, 190);
    --system-teal: rgb(48, 176, 199);
    --system-cyan: rgb(50, 173, 230);
    --system-blue: rgb(0, 122, 255);
    --system-indigo: rgb(88, 86, 214);
    --system-purple: rgb(175, 82, 222);
    --system-pink: rgb(255, 45, 85);
    --system-brown: rgb(162, 132, 94);

    --system-gray0: rgb(72, 72, 77);
    --system-gray1: rgb(122, 122, 127);
    --system-gray2: rgb(174, 174, 178);
    --system-gray3: rgb(199, 199, 204);
    --system-gray4: rgb(209, 209, 214);
    --system-gray5: rgb(229, 229, 234);
    --system-gray6: rgb(242, 242, 247);
    --system-gray7: rgb(249, 249, 255);
    --system-gray8: rgb(255, 255, 255);

    --selection-color: black;
    --selection-background-color: rgb(246, 196, 197);
  }

  /* TweakPanel colors */
  :root {
    --tp-base-background-color: hsl(230, 7%, 85%);
    --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
    --tp-container-background-color: hsl(230, 7%, 90%);
    --tp-container-background-color-active: hsl(230, 7%, 90%);
    --tp-container-background-color-focus: hsl(230, 7%, 90%);
    --tp-container-background-color-hover: hsl(230, 7%, 95%);
    --tp-container-foreground-color: hsl(230, 7%, 17%);
    --tp-groove-foreground-color: hsl(230, 7%, 17%);
    --tp-input-background-color: hsl(230, 7%, 92%);
    --tp-input-background-color-active: hsl(230, 7%, 96%);
    --tp-input-background-color-focus: hsl(230, 7%, 96%);
    --tp-input-background-color-hover: hsl(230, 7%, 96%);
    --tp-input-foreground-color: hsl(230, 7%, 17%);
    --tp-button-background-color: var(--tp-input-background-color);
    --tp-button-background-color-active: var(--tp-input-background-color-active);
    --tp-button-background-color-focus: var(--tp-input-background-color-focus);
    --tp-button-background-color-hover: var(--tp-input-background-color-hover);
    --tp-button-foreground-color: var(--tp-input-foreground-color);
    --tp-label-foreground-color: hsl(230, 7%, 17%);
    --tp-monitor-background-color: var(--tp-input-background-color);
    --tp-monitor-background-color-readonly: transparent;
    --tp-monitor-background-color-active: var(--tp-input-background-color-active);
    --tp-monitor-background-color-focus: var(--tp-input-background-color-focus);
    --tp-monitor-background-color-hover: var(--tp-input-background-color-hover);
    --tp-monitor-foreground-color: var(--tp-input-foreground-color);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    /* Colors */

    --system-red: rgb(255, 69, 58);
    --system-orange: rgb(255, 159, 10);
    --system-yellow: rgb(255, 214, 10);
    --system-green: rgb(48, 209, 88);
    --system-mint: rgb(102, 212, 207);
    --system-teal: rgb(64, 200, 224);
    --system-cyan: rgb(100, 210, 255);
    --system-blue: rgb(10, 132, 255);
    --system-indigo: rgb(94, 92, 230);
    --system-purple: rgb(191, 90, 242);
    --system-pink: rgb(255, 55, 95);
    --system-brown: rgb(172, 142, 104);

    --system-gray0: rgb(204, 204, 209);
    --system-gray1: rgb(142, 142, 147);
    --system-gray2: rgb(99, 99, 102);
    --system-gray3: rgb(72, 72, 74);
    --system-gray4: rgb(58, 58, 60);
    --system-gray5: rgb(44, 44, 46);
    --system-gray6: rgb(28, 28, 30);
    --system-gray7: rgb(21, 21, 23);
    --system-gray8: rgb(14, 14, 16);

    --selection-color: white;
    --selection-background-color: rgb(167, 118, 119);
  }

  /* TweakPanel colors */
  :root {
    --tp-input-background-color: rgba(187, 188, 196, 0.1);
    --tp-input-background-color-active: rgba(187, 188, 196, 0.25);
    --tp-input-background-color-focus: rgba(187, 188, 196, 0.2);
    --tp-input-background-color-hover: rgba(187, 188, 196, 0.15);
    --tp-input-foreground-color: hsl(230, 7%, 75%);
    --tp-button-background-color: var(--tp-input-background-color);
    --tp-button-background-color-active: var(--tp-input-background-color-active);
    --tp-button-background-color-focus: var(--tp-input-background-color-focus);
    --tp-button-background-color-hover: var(--tp-input-background-color-hover);
    --tp-button-foreground-color: var(--tp-input-foreground-color);
    --tp-monitor-background-color: var(--tp-input-background-color);
    --tp-monitor-background-color-readonly: transparent;
    --tp-monitor-background-color-active: var(--tp-input-background-color-active);
    --tp-monitor-background-color-focus: var(--tp-input-background-color-focus);
    --tp-monitor-background-color-hover: var(--tp-input-background-color-hover);
    --tp-monitor-foreground-color: var(--tp-input-foreground-color);
  }
}

body {
  /* Filter Colors */

  --filter-system-red: invert(31%) sepia(82%) saturate(3000%) hue-rotate(344deg) brightness(115%) contrast(105%);
  --filter-system-gray0: invert(36%) sepia(72%) saturate(11%) hue-rotate(222deg) brightness(95%) contrast(90%);
  --filter-system-gray1: invert(63%) sepia(4%) saturate(334%) hue-rotate(201deg) brightness(89%) contrast(86%);

  /* Special Colors */

  --sidebar-background-color: rgb(208, 219, 231);
  --tint-color1: rgba(255, 255, 255, 0.3);
  --tint-color2: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  body {
    /* Filter Colors */

    --filter-system-red: invert(69%) sepia(59%) saturate(6315%) hue-rotate(336deg) brightness(99%) contrast(108%);
    --filter-system-gray0: invert(97%) sepia(2%) saturate(509%) hue-rotate(200deg) brightness(84%) contrast(94%);
    --filter-system-gray1: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);

    /* Special Colors */

    --sidebar-background-color: rgb(42, 50, 63);
    --tint-color1: rgba(0, 0, 0, 0.2);
    --tint-color2: rgba(0, 0, 0, 0.4);
  }
}

body {
  /* Colors */

  --background-color: var(--system-gray6);
  --text-color: var(--system-gray0);
  --highlight-color: black;
  --border-color: var(--system-gray3);
  --expander-color: var(--system-gray1);
  --accent-color: var(--system-red);
  --separator-color: var(--system-gray3);

  --window-tabs-background-color: var(--system-gray5);
  --window-tabs-text-color: var(--text-color);
  --window-tabs-highlight-color: var(--accent-color);
  --tabs-background-color: var(--system-gray7);

  --window-tabs-height: 30px;
  --tabs-height: 26px;

  --toolbar-width: 30px;
  --icon-size: 16px;
  --medium-icon-size: 18px;
  --large-icon-size: 28px;

  /* Tabs */

  --tabs-shadow: 0px 2px 1.5px 0px var(--border-color);

  /* Filter Colors */

  --filter-text-color: var(--filter-system-gray0);
  --filter-highlight-color: var(--filter-system-grayZ);
  --filter-accent-color: var(--filter-system-red);

  /* Fonts */

  --sans-serif: Roboto, sans-serif;
  --monospace: Roboto Mono, monospace;
  --font-size: 10pt;
  --large-font-size: 18pt;
  --small-font-size: 8pt;

  /* Tools */

  --tool-backdrop-filter: blur(25px);
  --tool-background-color: rgba(208, 219, 231, 0.8); /* --sidebar-background-color */
  --tool-border-radius: 6px;
  --tool-border: 1px solid var(--system-gray8);
  --tool-shadow: 3px 3px 9px rgba(0, 0, 0, 0.6);

  --preview-background-color: white;
  --preview-border: 1px solid var(--system-gray6);

  --background-disabled: repeating-linear-gradient(
    -45deg,
    var(--tint-color1),
    var(--tint-color1) 10px,
    transparent 10px,
    transparent 20px
  )
}

@media (prefers-color-scheme: dark) {
  body {
    /* Colors */

    --text-color: var(--system-gray1);
    --highlight-color: var(--system-gray0);
    --border-color: var(--system-gray8);
    --expander-color: var(--system-gray8);
    --filter-text-color: var(--filter-system-gray1);
    --filter-highlight-color: var(--filter-system-gray0);

    /* Tabs */

    --tabs-shadow: 0px 0px 1px 0px var(--border-color);

    /* Tools */

    --tool-background-color: rgba(42, 50, 63, 0.8); /* --sidebar-background-color */
    --tool-border: 1px solid var(--system-gray2);
    --tool-shadow: 3px 3px 9px var(--system-gray8);

    --preview-background-color: black;
    --preview-border: 1px solid var(--system-gray4);
  }
}

body {
  --qtip-background-color: var(--sidebar-background-color);
  --qtip-border: var(--tool-border);
  --qtip-shadow: var(--tool-shadow);
}