LabelingSystem/web/libs/storybook/.storybook/preview.scss

@import '../../ui/src/styles';

body {
  height: 100vh;
  color: var(--color-neutral-content) !important;
  background-color: var(--color-neutral-background) !important;
}

#storybook-root,
#storybook-docs,
.sbdocs {
  height: 100%;
  color: var(--color-neutral-content) !important;
  background-color: var(--color-neutral-background) !important;
}

// Undo tailwind reset for the Docs pages
#storybook-docs .sbdocs-content h1:not(.sbdocs-preview *),
#storybook-docs .sbdocs-content h2:not(.sbdocs-preview *),
#storybook-docs .sbdocs-content h3:not(.sbdocs-preview *),
#storybook-docs .sbdocs-content h4:not(.sbdocs-preview *),
#storybook-docs .sbdocs-content h5:not(.sbdocs-preview *),
#storybook-docs .sbdocs-content h6:not(.sbdocs-preview *) {
  color: var(--color-neutral-content) !important;
}


// Within Doc Pages apply the theme colors only to the preview blocks
.sbdocs-preview {
  background-color: var(--color-neutral-background) !important;
  color: var(--color-neutral-content) !important;
  border: 1px solid var(--color-neutral-border) !important;
}

// Style Storybook docs UI elements for dark mode support
#storybook-docs {

  // Args table (props documentation)
  .docblock-argstable {
    color: var(--color-neutral-content) !important;

    thead,
    tbody,
    tr,
    th,
    td {
      color: var(--color-neutral-content) !important;
      background-color: var(--color-neutral-background) !important;
      border-color: var(--color-neutral-border) !important;
    }

    // Table header styling
    th {
      color: var(--color-neutral-content-subtle) !important;
    }

    // Property names and descriptions
    td {

      span,
      p,
      div {
        color: var(--color-neutral-content) !important;
      }
    }
  }

  // General content area
  .sbdocs-content {
    color: var(--color-neutral-content) !important;

    p,
    span,
    div,
    li,
    code {
      color: inherit !important;
    }
  }

  // Code blocks - ensure text is readable on dark backgrounds
  code,
  pre {
    background-color: var(--color-neutral-surface) !important;
    color: var(--color-neutral-content) !important;
  }

  // Inline code in args table (type annotations, default values)
  .docblock-argstable code,
  .docblock-argstable span[class*="css-"] {
    color: var(--color-neutral-content) !important;
  }

  // Type signature chips (e.g., "(element: HTMLElement) => boolean")
  .docblock-argstable td div[class*="css-"]>span[class*="css-"] {
    background-color: var(--color-neutral-surface) !important;
    color: var(--color-neutral-content) !important;
    border: none !important;
  }

  // Default value chips (e.g., "false", "true")
  .docblock-argstable td>span[class*="css-"] {
    background-color: var(--color-neutral-surface) !important;
    color: var(--color-neutral-content) !important;
    border: none !important;
  }

  // Form controls in args table (selects, inputs, toggles)
  .docblock-argstable select,
  .docblock-argstable textarea,
  .docblock-argstable input:not([role="switch"]) {
    background-color: var(--color-neutral-surface) !important;
    color: var(--color-neutral-content) !important;
    border-color: var(--color-neutral-border) !important;
  }


  // Toggle switches (label with for starting with "control-")
  .docblock-argstable label[for^="control-"] {
    background: var(--color-neutral-background) !important;
    border: 1px solid var(--color-neutral-border) !important;
  }

  .docblock-argstable input[role="switch"] {

    // Toggle text labels (False/True)
    &~span[aria-hidden="true"] {
      color: var(--color-neutral-content) !important;
      background-color: var(--color-neutral-background) !important;
    }

    // Checked state - use primary color
    &:checked {
      &~span:last-of-type {
        background-color: var(--color-primary-background) !important;
        color: var(--color-primary-content) !important;
      }
    }

    &:not(:checked) {
      &~span:first-of-type {
        background-color: var(--color-primary-background) !important;
        color: var(--color-primary-content) !important;
      }
    }
  }

  // Buttons (Set boolean, Set string, Set object, etc.)
  .docblock-argstable button {
    background-color: var(--color-neutral-surface) !important;
    color: var(--color-neutral-content) !important;
    border-color: var(--color-neutral-border) !important;
    box-shadow: var(--color-neutral-border) 0px 0px 0px 1px inset !important;
  }

  // Show code / Hide code toggle buttons
  .docblock-code-toggle {
    border-radius: 0 !important;
    background-color: var(--color-neutral-surface) !important;
    color: var(--color-neutral-content) !important;
    border-color: var(--color-neutral-border) !important;
  }

  // Preview toolbar (zoom controls, etc.)
  .sbdocs-preview .sb-bar {
    background-color: var(--color-neutral-surface) !important;
    border-color: var(--color-neutral-border) !important;

    button {
      color: var(--color-neutral-content) !important;

      svg {
        fill: currentColor !important;
      }
    }
  }
}