modeling-app/src/index.css

@import './colors.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

button,
input,
select,
textarea,
a {
  /* Make all interactive elements not act as handles
   * to drag the electron app window by default,
   * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
  */
  -webkit-app-region: no-drag;
}

body {
  margin: 0;
  @apply font-sans;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply text-chalkboard-110;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-display;
}

.body-bg {
  @apply bg-chalkboard-10;
}

.body-bg.dark,
.dark .body-bg {
  @apply bg-chalkboard-100;
}

body.dark {
  scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
  @apply text-chalkboard-10;
}

select {
  @apply bg-chalkboard-20;
}

.dark select {
  @apply bg-chalkboard-90;
}

/* We hide the cursor if the user has turned off the textEditor.blinkingCursor setting
 * any elements that could present a blinking cursor to the user
*/
input,
textarea,
*[contenteditable] {
  caret-color: var(--cursor-color, auto);
}

::-webkit-scrollbar {
  @apply w-2 h-2 rounded-sm;
  @apply bg-chalkboard-20;
}

::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-40 rounded-sm;
}

.dark ::-webkit-scrollbar {
  @apply bg-chalkboard-90;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-70;
}

button {
  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
  @apply focus-visible:outline-chalkboard-100;
}

button:hover {
  @apply border-chalkboard-40 bg-primary/5;
}

.dark button {
  @apply border-chalkboard-70 focus-visible:outline-chalkboard-10;
}

.dark button:hover {
  @apply border-chalkboard-60;
}

button:disabled {
  @apply cursor-not-allowed bg-chalkboard-20/50 text-chalkboard-60 border-chalkboard-20;
}

.dark button:disabled {
  @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
}

a {
  @apply text-primary hover:hue-rotate-15;
}

.dark a {
  @apply hover:brightness-110 hover:hue-rotate-0;
}

a.action-button,
.dark a.action-button {
  @apply text-inherit no-underline hover:hue-rotate-0;
}

input {
  @apply selection:bg-primary/50;
}

.dark input {
  @apply selection:bg-primary/40;
}

.mono {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/*
 * The first descendent of the CodeMirror wrapper is the theme,
 * but its identifying class can change depending on the theme.
*/
#code-mirror-override > div,
#code-mirror-override .cm-editor {
  @apply bg-transparent h-full;
  @apply select-auto;
}

#code-mirror-override .cm-scroller {
  overflow: auto;
}

#code-mirror-override .cm-gutter {
  @apply select-none;
}

#code-mirror-override .cm-activeLine,
#code-mirror-override .cm-activeLineGutter {
  @apply bg-primary/5;
}

.dark #code-mirror-override .cm-activeLine,
.dark #code-mirror-override .cm-activeLineGutter {
  @apply bg-chalkboard-70/20;
  mix-blend-mode: lighten;
}

#code-mirror-override .cm-focused .cm-activeLine,
#code-mirror-override .cm-focused .cm-activeLineGutter {
  @apply bg-primary/10;
}

.dark #code-mirror-override .cm-focused .cm-activeLine,
.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
  @apply bg-chalkboard-70/40;
}

#code-mirror-override .cm-matchingBracket {
  @apply bg-primary/20;
}

.dark #code-mirror-override .cm-matchingBracket {
  @apply bg-chalkboard-70/60;
}

#code-mirror-override .cm-gutters {
  @apply bg-chalkboard-10/30;
}

.dark #code-mirror-override .cm-gutters {
  @apply bg-chalkboard-110/50;
}

#code-mirror-override .cm-content {
  @apply caret-primary;
}
.dark #code-mirror-override .cm-content {
  @apply caret-chalkboard-10;
}

#code-mirror-override .cm-focused {
  outline: none;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

.react-json-view {
  @apply bg-transparent !important;
}

#code-mirror-override .cm-tooltip {
  @apply text-xs shadow-md;
  @apply bg-chalkboard-10 text-chalkboard-80;
  @apply rounded-sm border-solid border border-chalkboard-40/30 border-l-liquid-10;
}

.dark #code-mirror-override .cm-tooltip {
  @apply bg-chalkboard-110 text-chalkboard-40;
  @apply border-chalkboard-70/20 border-l-liquid-70;
}

#code-mirror-override .cm-tooltip-hover {
  @apply py-1 px-2 w-max max-w-md;
}

#code-mirror-override .cm-completionInfo {
  @apply px-4 rounded-l-none;
  @apply bg-chalkboard-10 text-liquid-90;
  @apply border-liquid-40/30;
}

.dark #code-mirror-override .cm-completionInfo {
  @apply bg-liquid-120 text-liquid-50;
  @apply border-liquid-90/60;
}

#code-mirror-override .cm-tooltip-autocomplete li {
  @apply px-2 py-1;
}
#code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
  @apply bg-liquid-10 text-liquid-110;
}
.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
  @apply bg-liquid-100 text-liquid-20;
}

#code-mirror-override .cm-content {
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
}

.cm-ghostText,
.cm-ghostText * {
  color: rgb(120, 120, 120, 0.8) !important;
}

.segment-length-label-text {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--degree, 0));
  @apply font-mono body-bg px-2 pt-0.5 rounded-sm border border-chalkboard-110 dark:border-chalkboard-10;
}

@layer components {
  kbd.hotkey {
    @apply font-mono text-xs inline-block px-0.5 py-[2px] rounded;

    /* This is the only place in our code where layout is impacted by theme.
     * We may not want that later, if hotkeys are possibly visible
     * while switching theme, but more padding feels better in dark mode.
     */
    @apply dark:px-1;

    @apply text-chalkboard-70 dark:text-chalkboard-40;
    @apply bg-chalkboard-20 dark:bg-chalkboard-90;
    @apply border border-t-0 border-b-2 border-chalkboard-30 dark:border-chalkboard-80;
  }
}

@layer utilities {
  /* 
    This is where your own custom Tailwind utility classes can go,
    which lets you use them with @apply in your CSS, and get 
    autocomplete in classNames in your JSX.
  */
  .parsed-markdown ul,
  .parsed-markdown ol {
    @apply list-outside pl-4 lg:pl-8 my-2;
  }

  .parsed-markdown ul li {
    @apply list-disc;
  }

  .parsed-markdown li p {
    @apply inline;
  }

  .parsed-markdown code {
    @apply px-1 py-0.5 rounded-sm;
    @apply bg-chalkboard-20 text-chalkboard-80;
    @apply dark:bg-chalkboard-80 dark:text-chalkboard-30;
  }

  button.reset {
    @apply bg-transparent border-transparent m-0 p-0 rounded-none text-base;
  }

  button.reset:hover {
    @apply bg-transparent border-transparent;
  }

  /* Add an outline that matches the app foreground (or text) color */
  .outline-appForeground {
    @apply outline-chalkboard-100 dark:outline-chalkboard-10;
  }
}

#code-mirror-override .cm-scroller,
#code-mirror-override .cm-editor {
  height: 100% !important;
}

/* Can't use #code-mirror-override here as we're outside of this div */
.body-bg .cm-diagnosticAction {
  @apply bg-primary;
}