opengist/public/css/embed.css

/* Self-contained stylesheet for the embeddable gist widget
   (templates/partials/gist_embed.html). It is loaded inside the
   <opengist-embed> web component's shadow DOM and deliberately does NOT depend
   on the app's new token system — it ships its own scoped Tailwind + palette so
   the embed renders identically wherever it is included. */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* Dark styling fires on EITHER:
   - the .dark class (explicit ?dark, or the auto-mode JS toggle), OR
   - the OS preference, but only when .theme-auto is present (auto mode) so an
     explicit ?light embed on a dark-OS page stays light.
   The media path means the card background follows the OS even if the JS
   class-toggle never runs — matching how the syntax highlighting already works. */
@custom-variant dark {
    &:where(.dark, .dark *) {
        @slot;
    }
    @media (prefers-color-scheme: dark) {
        &:where(.theme-auto, .theme-auto *) {
            @slot;
        }
    }
}

@source "../../templates/partials/gist_embed.html";

@theme {
    /* Custom gray palette */
    --color-gray-50: #EEEFF1;
    --color-gray-100: #DEDFE3;
    --color-gray-200: #BABCC5;
    --color-gray-300: #999CA8;
    --color-gray-400: #75798A;
    --color-gray-500: #585B68;
    --color-gray-600: #464853;
    --color-gray-700: #363840;
    --color-gray-800: #232429;
    --color-gray-900: #131316;

    /* Primary color palette */
    --color-primary-50: #d6e1ff;
    --color-primary-100: #d1dfff;
    --color-primary-200: #b9d2fe;
    --color-primary-300: #84b1fb;
    --color-primary-400: #74a4f6;
    --color-primary-500: #588fee;
    --color-primary-600: #3c79e2;
    --color-primary-700: #356fc0;
    --color-primary-800: #2b5da3;
    --color-primary-900: #1f4b8c;
    --color-primary-950: #192b57;

    /* Border width extension */
    --border-width-1: 1px;
}

@layer base {
    :host {
        --tw-border-style: solid;
        --tw-border-width: 0;
        display: block;
    }
}

.opengist-embed {
    @import "tailwindcss";
    @layer base {
        ul, ol {
            list-style: revert;
        }

        button:not(:disabled),
        [role="button"]:not(:disabled) {
            cursor: pointer;
        }

        @import './embed-ipynb.css';
        @import "./embed-style.css";
    }
}